div+css如何控制图片在电脑屏幕上的比例及位置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div+css如何控制图片在电脑屏幕上的比例及位置相关的知识,希望对你有一定的参考价值。

在DIV中插入一张图片如何让它在不同尺寸的电脑屏幕中显示相同的比例。例如都让他剧中在19显示器居中80%显示在14.1显示器也是剧中80%显示。希望获得您详细的指教!图片是抓取的大小固定
高手来解决

参考技术A <div style="position:relative; width:80%; margin:0px auto;height:50px;background:url(kimg_02.gif) center no-repeat;">
</div>

图片作为背景
图片的大小要以宽屏为基准本回答被提问者采纳
参考技术B 把宽度设为百分比
然后再加上div盒子margin:0px auto;居中显示就可以了
.DivNamemargin:0px auto;width:80%;
参考技术C 如果是背景图片容易实现,让外围包含此图片的DIV大小按百分比来控制,里面反正是背景色,不论你如何变,背景图都会跟着变化 参考技术D 把它的高度和宽度都用%表示看看行不行喽。

响应性- 如何使用 CSS 控制 PC 显示的比例和布局?

【中文标题】响应性- 如何使用 CSS 控制 PC 显示的比例和布局?【英文标题】:Responsiveness- How to control PC display's scale and layout with CSS? 【发布时间】:2019-05-19 17:31:52 【问题描述】:

到目前为止,当我尝试创建响应式网站时,我一直使用媒体查询来控制屏幕分辨率。然而,虽然大多数 PC 屏幕的比例为 100%,但许多笔记本电脑的比例为 125% 甚至 150%。有没有什么办法可以添加只指定给 150% 比例显示的 CSS 属性?

【问题讨论】:

希望您至少尝试自己编写代码。我建议你做一些additional research,通过谷歌或搜索SO,尝试一下。如果您仍然遇到问题,请返回您的代码并解释您尝试过的操作。 【参考方案1】:

您可能可以使用一些 JS 来做到这一点,但它可能需要大量的自定义边缘案例编码。另一种方法是使用viewport 单位。这样,无论分辨率大小,您都可以确保所有用户都能获得相同的体验。

查看这个 codepen 示例并调整屏幕大小/更改显示以了解我的意思

https://codepen.io/oneezy/pen/oJYoEG

*  margin: 0; padding: 0; box-sizing: border-box; font-family: "Roboto"; 

/* Styles
***************************/
header  background: black; color: white; display: flex; align-items: center; 
p  opacity: .78; 




/*==============================================                                           
  ####    #####  ##   ##  ##   ####  #####  
  ##  ##  ##     ##   ##  ##  ##     ##     
  ##  ##  #####  ##   ##  ##  ##     #####  
  ##  ##  ##      ## ##   ##  ##     ##     
  ####    #####    ###    ##   ####  #####  
==============================================*/

/* Mobile */
@media (min-width: 0) and (max-width: 768px)  

	h1  font-size: 9vw; padding: 2vh 0; 
	h2  font-size: 7vw; 
	p   font-size: 4vw; 

  
/* Tablet */
@media (min-width: 769px) and (max-width: 1024px)  

	h1  font-size: 7vw; padding: 2vh 0; 
	h2  font-size: 5vw; 
	p   font-size: 3vw; 

  
/* Desktop */
@media (min-width: 1025px)  

	h1  font-size: 6vw; padding: 2vh 0; 
	h2  font-size: 4vw; 
	p   font-size: 2vw; 
<header>
	<h1>Heading</h1>
</header>

<main>
	<article>
		<h2>Title</h2>
		<p>I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. </p>
	</article>
	
	<article>
		<h2>Title</h2>
		<p>I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. </p>
	</article>
	
	<article>
		<h2>Title</h2>
		<p>I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. </p>
	</article>
</main>

【讨论】:

【参考方案2】:

在浏览器中没有通过代码控制缩放级别的选项,但是移动设备可以通过使用下面的元标记来限制缩放选项。

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

【讨论】:

【参考方案3】:

使用这个元数据。

<!–– 150% scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.5"/> 

【讨论】:

以上是关于div+css如何控制图片在电脑屏幕上的比例及位置的主要内容,如果未能解决你的问题,请参考以下文章

怎样用css将div固定在屏幕某个比例(比如说屏幕靠右1/3)处?

CSS怎样不让图片高度超出屏幕

响应性- 如何使用 CSS 控制 PC 显示的比例和布局?

怎样用css控制图片自适应大小?

怎样用css控制图片自适应大小?

CSS DIV绝对定位 后 页面的大小改变 div层位置如何保持不变