img 和 background-image 的高度通过宽度自适应
图片的高度根据宽度保持一致
是需要通过 padding-top 来代替 height。
注意: padding-top 是通过父级的宽度保持一致,所以在使用的时候必须要套一层父级的宽度。
如果要通过 标签实现将图片填充整个元素,并保持与原图的宽高缩放比例一致,并根据宽高比例裁剪图片以完全展示并居中显示,可以使用 CSS 和一些技巧来实现。
首先,确保父元素具有相对定位(position: relative;),然后使用绝对定位(position: absolute;)来定位 元素,并设置其宽度和高度为100%以填充整个父元素。
img 方式
html:
<div style="width: 400px;height: 600px;">
<div class="container">
<img src="path/to/image.jpg" alt="Image" class="background-image">
</div>
</div>
css:
.container {
position: relative;
width: 300px;
padding-top: 100%; /* 用padding-top 表示 height,height 会和父级的width保持一致,也就是400px */
overflow: hidden; /* 确保超出部分被裁剪 */
}
.background-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: cover; /* 新增,确保图片填充整个容器 */
}
在上面的示例中,.container 类指定了父元素的宽度和高度,并设置了相对定位和 overflow: hidden; 以确保超出部分被裁剪。
.background-image 类指定了 元素的样式。使用绝对定位和 top: 50%; left: 50%; transform: translate(-50%, -50%); 将其居中定位在父元素中心。然后,设置其宽度和高度为100%以填充整个父元素,并使用 object-fit: cover; 确保图片按比例缩放以填充整个容器。
这样设置后,无论图片的宽高比例如何,图片都会被缩放并填充整个容器,并且保持居中显示。如果图片的宽度大于高度,则会裁剪部分高度以确保高度完全展示;如果图片的高度大于宽度,则会裁剪部分宽度以确保宽度完全展示。
background-image 方式
html:
<div style="width: 400px;height: 600px;">
<div class="background-image"></div>
</div>
css:
.background-image {
width: 300px;
padding-top: 100%;
background-image: url('path/to/image.jpg');
background-size: cover;
background-position: center;
}
在上面的示例中,.background-image 类指定了元素的宽度和高度,并设置了背景图片的 URL。background-size: cover 会将背景图片缩放以填充整个元素,保持宽高比例。background-position: center 则将背景图片居中显示。
这样设置后,无论图片的宽高比例如何,背景图片都会被缩放并完全填充元素,并且保持居中显示。如果图片的宽度大于高度,则会裁剪部分高度以确保高度完全展示;如果图片的高度大于宽度,则会裁剪部分宽度以确保宽度完全展示。