CSS:100% 宽度或高度同时保持纵横比?

标签 css image height width

目前,使用 STYLE,我可以在高度上使用 width: 100%auto(反之亦然),但我仍然无法将图像限制为一个特定的位置,分别是太宽或太高。

有什么想法吗?

最佳答案

如果您只在图像上定义一个维度,图像纵横比将始终保持不变。

问题是图像比您喜欢的更大/更高吗?

您可以将它放在一个 DIV 中,该 DIV 设置为图像所需的最大高度/宽度,然后设置 overflow:hidden。这会裁剪超出您想要的任何内容。

如果图像的宽度和高度为 100%:auto,而您认为它太高,那是因为保留了纵横比。您需要裁剪或更改纵横比。

请提供更多有关您具体要完成的工作的信息,我会尽力提供更多帮助!

--- 根据反馈进行编辑---

你熟悉max-width吗?和 max-height特性?你总是可以设置那些。如果您没有设置任何最小值而设置了最大高度和宽度,那么您的图像将不会失真(纵横比将保持不变)并且它不会大于最长的尺寸并达到其最大值。

关于CSS:100% 宽度或高度同时保持纵横比?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3751565/

相关文章:

jquery - 如何在固定(粘性导航)时恢复我的导航的正常高度?

html - 在 flex 中适合高度为 100% 的图像

javascript - 使用 JavaScript 获取图像的一部分

表格 View 内容的快速高度

jquery - 导航栏不会在 Twitter Bootstrap 3 模板中折叠和居中

css - 在不知道宽度的情况下 overflow hidden 的div中的中心图像

javascript - 页面向下滚动一半时 scrollTop 不工作

html - 在链接标签后面设置背景图片

css - HTML5/CSS 浏览器故障

jquery - 图像叠加层 "margin-top"无法正确显示不同的图像高度