响应式网页设计和调整图像大小

Posted 2023-03-05

【中文标题】响应式网页设计和调整图像大小

【英文标题】：Responsive web design and resizing images

【发布时间】：2012-08-16 04:54:53

【问题描述】：

响应式网页设计适用于除图像之外的大多数 html 元素。我发现它一团糟。调整视口大小时，不能在图像上使用调整大小百分比，因为它将占用父元素的宽度和高度。您需要为图像设置固定的宽度和高度...还是我遗漏了什么？

那么，对于容器元素/父级将拉伸到其原生宽度以上并缩小到其原生宽度以下的图像，您究竟如何进行响应式设计？

谢谢

【参考方案1】：

在响应式设计中完成的事情是在你的 css 中为图像和其他一些元素设置这个：

img, embed, object, video 
max-width:100%;
    height:auto;

然后在您的 html 中，图像只会占用其容器的大小。

您不设置图像大小本身，而是让它自己增长/缩小。

【讨论】：

身高呢？它会根据宽度自动调整大小吗？还有，IE6-7呢，支持max-width吗？

高度会自动缩放。以下是有关图像的更多信息，包括如果您想要/必须支持它们，如何使它们在旧版本的 IE 中工作：unstoppablerobotninja.com/entry/fluid-images

【参考方案2】：

好吧 - 你可以写： .selector imgwidth: 100%; height: auto; 然后使用它所在的 div 的大小来确定它的比例。或者您也可以将图像设置为背景并使用类似的方法，甚至可能会弄乱背景大小：封面。我会做一个jsfiddle...

.image-w img 
  display: block;
  width: 100%;
  height: auto;

【参考方案3】：

我在我的网站上所做的是：

页面内容....

div class=picr>

img src="/Images/Home/MountainPine.jpg"  id="mountainpine" >

<p>Caption about mountain pine</p>

/div>

然后在 CSS 中

pic, pic6 
    float: left;
    

...

.pic, .picr 
    width: 37%;
    

#content  img 
    width: 100% ;
    

所以 div 类被样式化了，图片被设置为填充它。通过使用div，我也可以设置样式

在 .pic 类中与正文区分开来。