让img在div里显示,高自适应,宽显示img左边的百分之50%填满div
时间: 2024-03-15 12:47:22 浏览: 144
div或img图片高度随宽度自适应的方法
5星 · 资源好评率100%
如果你希望一个 `img` 元素在一个 `div` 元素中,高度自适应,宽度填充 `div` 的一半,可以使用 flexbox 布局来实现。具体做法如下:
HTML 代码:
```html
<div class="container">
<img src="your-image-url" alt="your-image-description">
</div>
```
CSS 代码:
```css
.container {
display: flex;
flex-wrap: wrap;
}
.container img {
flex: 0 1 50%; /* 设置宽度为父元素的一半 */
height: auto; /* 高度自适应 */
object-fit: cover; /* 图片填充 */
}
```
上面的代码中,我们使用了 `flexbox` 布局,将 `container` 元素的 `display` 属性设置为 `flex`,并设置了 `img` 元素的宽度为父元素的一半。同时,我们还使用了 `object-fit: cover` 属性来保持图片的宽高比例,并填充整个 `img` 元素。
这样,你就可以实现一个高度自适应、宽度填充 `div` 一半的 `img` 元素了。
阅读全文