使用 CSS 调整不同大小的图像答案

【问题标题】：Resizing different sized images using CSS使用 CSS 调整不同大小的图像
【发布时间】：2014-01-15 05:32:09
【问题描述】：

我有一个网页，它会在不同的时间显示不同的图像。有些图像比网页宽，有些更高，有些两者兼而有之。有没有办法使用 CSS 来限制两者中的较大者（例如，如果图像对于屏幕来说太宽，图像会减小高度和宽度以保持纵横比相同，直到宽度适合。相同如果高度太高的情况）。

我设法缩小了最初约为 1500 像素 x 2000 像素的图像，使其宽度适合，但仍需要滚动条才能看到图像的底部。我已经通过具有以下内容的容器 div 实现了这一点：

#container {
    min-width: 740px;
    max-width: 1000px;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

然后将包含图像的 div 设置为 width:100% 和 height:100%。宽度改变以适合，但高度不适合！

编辑：使用下面我得到的答案中给出的两个示例：

这只是将图像限制在一定的大小，我可以通过设置图像的宽度和高度属性来做到这一点。我希望它在保持纵横比的同时最大化到屏幕，所以如果它是一个宽图像，则将显示整个宽度（尽管上下都有空白空间以保持纵横比），同样，如果它是一个高图像，则整个高度图像的显示在两侧有空白区域。对不起，如果我最初的问题没有简洁地表达这一点！

【问题讨论】：

您使用的是background-image 还是<img>s？如果前者尝试.image{ background-image: url("your/url/here"); background-size:contain; background-repeat:no-repeat; background-position:center; }
很难从你的问题中理解你期望什么样的结果。如果您有一个固定容器，并且您希望不同的图像从边缘填充容器，只需使用#container img { width:100% }，图像将根据父容器大小进行缩放。
@Giovanni 请说明您希望您的图片显示多大？您想在保持图像纵横比的同时填充整个浏览器窗口吗？下面的两个示例都以示例大小创建了一个包装器元素，可以根据需要进行设置。如果你要改变图像的宽度和高度，那么你就会失去纵横比！再说一遍：请清楚说明您希望如何显示您的图像！最好粘贴您网站的一些代码或链接，以便我们可以看到您将图片放在什么环境中。

标签： css html

【解决方案1】：

如果不添加 Javascript，使用 img 标签无法实现这一点。而不是：

<img src="myimage.jpg">

使用

<div class="preview" style="background-image:url(myimage.jpg)"></div>

然后添加一些 CSS：

.preview {
    background-size:contain;
    background-repeat:no-repeat;
    width:300px;
    height:300px;
}

【讨论】：

不会将图像设置为 300px x 300px 吗？
是的，我只是举了一些尺寸的例子，因为你没有说你想限制什么尺寸。实际上由于contain，它不会调整到那个大小，它只是将它限制到那个大小。
好吧，我希望它限制为全宽或全高，以较大者为准（即，我希望显示整个图像：如果图像比它高，则缩小到 100% 宽度，如果图像高于它是宽减少到 100% 高度）
这就是它现在所做的。这些尺寸之所以存在，是因为如果不限制最大宽度和高度，则无法满足您的要求 - 现在在此示例中为 300 像素。

【解决方案2】：

这可能就是你想要的：

HTML：

<div id="container" style="background-image: url('pic1.jpg');"></div>

CSS：

#container {
   width: 600px;
   height: 500px;
   overflow: hidden;
   background-size: cover;
   background-position: center center;
}

但无论如何，如果你想用可变图像大小填充固定容器，如果你想保持图像的纵横比，你将不得不牺牲一些图像来溢出内容边界。

【讨论】：

保持纵横比，但强制它进入不同的容器纵横比。这似乎是我个人用于幻灯片等的合适解决方案。