如何在保持图像宽高比的同时拉伸图像以填充<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&nbsp;class="fill"></div>CSS：.fill&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden; &nbsp;&nbsp;&nbsp;&nbsp;background-size:&nbsp;cover; &nbsp;&nbsp;&nbsp;&nbsp;background-position:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;background-image:&nbsp;url('path/to/image.jpg');}这会将您的图像作为背景，并将其拉伸以适应div大小而不会失真。

Answer 2

不是一个完美的解决方案，但这个CSS可能有所帮助&nbsp;缩放是使这个代码工作的原因，理论上理论上这个因素对于小图像来说理想上是理想的 - 但在大多数情况下，2,4或8可以正常工作。#myImage&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;zoom:&nbsp;2;&nbsp;&nbsp;//increase&nbsp;if&nbsp;you&nbsp;have&nbsp;very&nbsp;small&nbsp;images&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;max-height:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;max-width:&nbsp;100%;}