Question

我的div高度为500px，宽度为100％。在这个div中我想添加一个图像（它的宽度将作为屏幕大小），但是当我添加图像时，它的大小继续保持原始大小（远远超过500px并超过我页面中的另一个div）。我试图将图像div设置为宽度：100％和高度：自动但图像不会改变。我阅读并尝试了这个解决方案：http://css-tricks.com/how-to-resizeable-background-image/但仍然，我想要的。这是我的代码：

<div id="main_pics" class="container">
<!-- photos here -->
<img src="5.jpg" id="image">

</div>

#main_pics{
margin-top: 57px;
width: 100%;
height: 500px;
}

.container{
width: 100%;
height: 500px;
background-color: white;
}

#image {
width: 100%;
height: auto;
}

我希望它看起来像这个网站： http://www.panel-k.co.il

感谢。

Answer 1

您可能想要使用背景图片和背景尺寸：封面。

<div id="main_pics" class="container">
<!-- photos here -->
</div>

#main_pics{
margin-top: 57px;
width: 100%;
height: 500px;
background-image: url("5.jpg");
background-position: center;
background-size: cover;
}

.container{
width: 100%;
height: 500px;
background-color: white;
}

小提琴在这里http://jsfiddle.net/LLdp4eg4/1/

您还可以为图像添加max-height：500px，但这会在大屏幕上拉伸它。

Answer 2

我并不完全理解这个问题，但听起来你可能正在寻找溢出：隐藏。所以你的CSS应该有

#main_pics{
  margin-top: 57px;
  width: 100%;
  height: 500px;
  overflow:hidden
}

Answer 3

嗯，你必须做出让步。

首先，您需要将overflow: hidden添加到父容器中，以便在图像大于允许的大小时剪切图像。

然后，使用图像的全宽，同时拉伸/切割其高度

img { 
    width: 100%;
}

或拉伸/剪切其宽度以适合div的整个高度

img {
    height: 100%;
}

最后，您还可以使用某些内容来限制最高者，因此您的图片永远不会被剪切，但总是被拉伸

img {
    max-width: 100%;
    max-height: 100%;
}

其他选项会修改图片的宽高比，使某些屏幕尺寸明显变得难看。

关于您的示例网站的一点注意事项：他们使用了第二种情况。他们使用固定高度和非常大的图像，并切割它的边。

Answer 4

首先，我想建议使用ID并不是一个好习惯。现在解决问题。问题有两种选择：

#image { 宽度：100％; 高度：100％; }

但是如果您想要的高度和图像宽度可能没有适当的宽高比，这将使您的图像拉伸。

所以，第二个选项

#image{
 width:auto;
 height:500px;
}

这可能会使您的图像宽度变小，但看起来不会拉伸。

选择最适合您的人：）

按屏幕大小保存图像比例

4 个答案: