按屏幕大小保存图像比例答案

【问题标题】：save image proportion by screen size按屏幕大小保存图像比例
【发布时间】：2015-01-24 02:25:35
【问题描述】：

我有 500 像素高和 100% 宽的 div。在这个 div 中，我想添加一个图像（它的宽度将作为屏幕大小），但是当我添加图像时，它的大小继续保持原始大小（它远远超过 500px 并且在我的页面中越过另一个 div） .我试图将图像 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

谢谢。

【问题讨论】：

标签： html css image

【解决方案1】：

您可能想要使用 background-image 和 background-size: 封面。

<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 添加到您的图像中，但这会在大屏幕上拉伸它。

【讨论】：

但我不想要只有 1 张图片，所以当我在 html 文件中设置图像时它不起作用，我的想法是设置 5 个不同的图像，每 10 秒更改一次（通过 javascript） .所以当我将css文件中的图像设置为背景图像时，它对我没有帮助。当我在 html 文件中设置图像时，它会泄漏到我的所有页面（因为图像大小）并覆盖我的另一个 div。
这是一个单独的问题，但您需要做的是：您可以旋转具有不同背景图像集的 div，而不是使用 javascript 旋转图像。如果您右键单击您在 chrome 或 firefox 中作为示例 (panel-k.co.il) 提供的那个视线并“检查元素”，您会发现这正是他们正在做的事情。这个 SO 问题可能对此有所帮助：stackoverflow.com/questions/13987580/…

【解决方案2】：

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

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

【讨论】：

但是由于这个解决方案图像会被剪切..整个图像将不可见..

【解决方案3】：

好吧，你必须做出让步。

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

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

img { 
    width: 100%;
}

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

img {
    height: 100%;
}

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

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

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

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

【讨论】：

【解决方案4】：

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

#图像{ 宽度：100%；高度：100%； }

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

所以，第二个选项

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

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

选择最适合你的人:)

【讨论】：