如何仅使用 CSS 来保持元素长宽比？

使用 CSS 保留元素宽高比：高度的最小宽度

设置元素的最小宽度以匹配其高度可能是一个挑战当高度没有明确定义时。虽然使用 jQuery 提供了一个解决方案，但可以直接在 CSS 中实现此行为。

要保持纵横比，请利用“替换元素”概念。图像 () 就是一个典型的例子。通过设置其高度，保留固有的宽高比，自动调整宽度以匹配。

实现CSS解决方案

创建一个具有所需任意值的“容器”输入高度并将其位置设置为“相对”。在容器内添加高度为 100% 的图像。这会自动按比例设置图像的宽度。

嵌套一个具有绝对定位的“内容”元素，以占据整个容器的空间而不影响其尺寸。

宽高比控制

要调整纵横比，请改变图像的高度。例如，4:3 的比例需要将图像的高度设置为 133%。

其他注意事项

解决方案中使用的透明 1x1 px gif 可以替换为其他元素，例如画布或 SVG。如果原始图像没有 1:1 的宽高比，则需要调整高度值。

根据宽度设置元素高度，请参阅“使用 CSS 维护 Div 的宽高比”资源。

以上是如何仅使用 CSS 来保持元素长宽比？的详细内容。更多信息请关注PHP中文网其他相关文章！