按屏幕尺寸保存图像比例

Question

我有 div 高度为 500 像素，宽度为 100%。在这个 div 我想添加一个图像（它的宽度将作为屏幕尺寸），但是当我添加图像时它的尺寸继续保持原始尺寸（它远远超过 500px 并越过另一个 divs 在我的页面中）。我尝试将图像 div 设置为 width:100% 和 heigh:auto，但图像不会改变。我阅读并尝试了这个解决方案：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

我没有完全理解这个问题，但听起来您可能正在寻找 overflow:hidden。所以你的css应该有

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

Answer 2

好吧，你不得不让步。

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

然后，要么使用图片的全宽，而 stretching/cutting 使用其高度

img { 
    width: 100%;
}

或stretch/cut其宽度适合div的整个高度

img {
    height: 100%;
}

最后，您还可以使用一些东西来限制最高的那个，这样您的图像就不会被剪切，而是始终被拉伸

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

其他选项会修改图像的纵横比，使其在某些屏幕尺寸下显得丑陋。

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

Answer 3

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

<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;
}

Fiddle 在这里 http://jsfiddle.net/LLdp4eg4/1/

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

Answer 4

首先，我想建议使用 ID 不是一个好的做法。现在为您解决问题。问题有两个选项：

#图片{ width:100%； height:100%； }

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

所以，第二个选项

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

这可能会使您的图片在宽度方面变小，但看起来不会被拉伸。

选择最适合你的人:)

按屏幕尺寸保存图像比例

save image proportion by screen size

html

css

image