如何在div

Question

无论div中的尺寸如何，我都希望显示完整的图像。 div的尺寸为：宽度：400px，高度：400px [400x400]。因此，即使图像大于div，我也希望整个图像显示在div中。图像应保持其纵横比。如何使用CSS或jQuery实现这一目标？如果不使用PHP或任何其他脚本操作图像，这是否可行？

[抱歉语法错误或英语不好]

Answer 1

如果您将其添加为背景，则可以添加：
background-size: contain;

如果您使用img标签，则：
object-fit: contain;

为了更好地兼容旧版浏览器，您应该使用背景方法。

<小时/> 编辑：
只是想把它放在这里，万一其他人需要它：

1. 没有对象：https://jsfiddle.net/ke8yu22d/

2. 使用对象：https://jsfiddle.net/yf5psqyL/

3. 作为背景：https://jsfiddle.net/vqy316L6/

Answer 2

height:160px;
width:160px;
background-image: url('images/Science.png');
background-position:center center;
background-repeat:no-repeat;
background-clip:content-box;