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

Question

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

我设法减少原来大约1500px x 2000px的图像，因此它的宽度适合，但仍需要滚动条才能看到图像的底部。我通过一个容器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％。宽度变为合适，但高度不合适！

---

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

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

Answer 1

使用img标记无法在不添加Javascript的情况下实现这一点。而不是：

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

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

但无论如何如果你想要填充具有可变图像尺寸的固定容器，如果你想保持图像的宽高比，你将不得不牺牲一些图像以溢出内容边界。