如何在将图像放入 Div 时保持宽高比？

在 Div 中调整图像时保留宽高比

在受限空间内显示图像时，通常希望在不影响其宽高比的情况下调整图像。 HTML 和 CSS 提供了一个优雅的解决方案来实现此目的。

方法

保持图像长宽比的关键是利用 max-height 和 max-width CSS 属性。实现方法如下：

1. 设置div高度和宽度：确定包含图像的div所需的高度和宽度。

2. 将 max-height 和 max-width 应用于image:

   • max-height: 100%;: 确保图像高度不超过 div 的高度。
   • max-width: 100%;: 防止图像溢出 div 的宽度宽度。

这样做，图像将在 div 边界内缩小或扩展，同时保持其纵横比。

示例

考虑以下 HTML 和 CSS 代码：

在此示例中，图像“my-image.jpg”将动态调整其大小以适合 48x48 div，保持其原始比例。

以上是如何在将图像放入 Div 时保持宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！