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

Question

Repsonsive网页设计在除了图像之外的大多数html元素上都很有效。我觉得它很乱。调整视口大小时，不能在图像上使用调整大小百分比，因为它将采用父元素的宽度和高度。你需要为图像设置固定的宽度和高度......或者我错过了什么？

那么你究竟如何做一个响应式设计，其中包含容器元素/父级将在其原始宽度之上拉伸并缩小到其原始宽度以下的图像？

谢谢

Answer 1

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

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

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

您不需要设置图像大小，只需让它自己增长/缩小。

Answer 2

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

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

Answer 3

我在网站上所做的是：

页面的东西......

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类中设置

样式，使其与正文文本区别开来。