如何在保持图像宽高比的同时拉伸图像以填充<div>？

Question

如何在保持图像宽高比的同时拉伸图像以填充<div>？我需要将此图像拉伸到可能的最大尺寸，而不会溢出<div>或倾斜图像。我无法预测图像的宽高比，因此无法知道是否使用：<img src="url" style="width: 100%;">要么<img src="url" style="height: 100%;">我不能同时使用两者（即style =“width：100％; height：100％;”）因为这将拉伸图像以适应<div>。该<div>具有的大小为屏幕，这也是不可预测的百分比来设置。

Answer 1

只使用CSS和更简单的方法HTML：

HTML：

<div class="fill"></div>

CSS：

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');}

这会将您的图像作为背景，并将其拉伸以适应div大小而不会失真。

Answer 2

不是一个完美的解决方案，但这个CSS可能有所帮助 缩放是使这个代码工作的原因，理论上理论上这个因素对于小图像来说理想上是理想的 - 但在大多数情况下，2,4或8可以正常工作。

#myImage {
    zoom: 2;  //increase if you have very small images    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;}