如果容器大小比例变了图片的比例不就变了吗
时间: 2024-03-21 20:41:55 浏览: 11
是的,如果容器大小的比例改变了,图片的比例也会随之改变。但是,如果你希望图片的比例保持不变,可以使用CSS中的object-fit属性。
object-fit属性可以控制图片在容器内的展示方式,包括填充容器、保持原始比例、拉伸等等。如果想保持原始比例,可以将object-fit属性设置为contain或者cover,具体使用哪一个取决于你的需求。
contain:将图片缩放到宽度或高度与容器的宽度或高度相等,保持原始比例,图片可能有留白。
cover:将图片缩放到宽度或高度与容器的宽度或高度相等,保持原始比例,图片可能会被裁剪。
下面是示例代码:
```html
<div class="container">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
</div>
```
```css
.container {
display: flex;
align-items: center;
justify-content: space-between;
height: 500px; /* 容器高度 */
}
.container img {
width: 100%; /* 图片宽度 */
height: 100%; /* 图片高度 */
object-fit: contain; /* 保持原始比例 */
}
```
这样,无论容器大小的比例如何改变,图片的比例都会保持不变,并填充整个容器。