制作图像以适合其父尺寸

Question

我有一些大尺寸的照片，我想将它们设置为父尺寸。如果一次父尺寸是 1200x800，我想将照片尺寸设置为 1200x800，但我也想看到 整个 图像。如果我的父维度是 500x300，我希望图像是 500x300 等等。

这可能吗？我想根据父级的尺寸缩小或扩展图像。

谢谢！

原文由 kfirba 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您想要的 css 属性是 max-width ：

CSS

 img {
    max-width:100%;
}

您可以在图像周围添加一个容器并设置 overflow:hidden 以防止图像变得大于定义的宽度/高度。

原文由 soyuka 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用这段 CSS 来缩放图像：

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

原文由 Morpheus 发布，翻译遵循 CC BY-SA 3.0 许可协议