html - 如何在不使用javascript的情况下使图像适合div

Question

我想在不使用任何 javascript 且不让图像拉伸(stretch)的情况下使我的图像适合 div。我无法使用 background-image 属性，因为我正在使用 css 转换。使用

max-height:100%;
max-width:100%;

有效并且正是我想要做的，除了图像太小的情况。我考虑过将图像放大到一定高度，同时保持宽度，然后应用 max-height 和 max-width 但这似乎是一个非常 hacky，耗时的解决方案，如果它甚至可以工作的话。还有其他建议吗？

谢谢

卡比尔

Answer 1

将图像显示为 block ，它会适合父容器

将图像包裹在容器中并为其中的图像设置此样式:

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

所以它不会拉伸(stretch)

here you have a fiddle
This fiddle图像比容器小