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

Question

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

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

谢谢

score 13 · Accepted Answer

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

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

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

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

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

页面内容....

div class=picr>

img src="/Images/Home/MountainPine.jpg" alt="Mountain Pine" 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 类中与正文区分开来。

3 回答 3