html - (已关闭)无法将图像放入 div 容器中
问题描述
upd:没有人找到解决方案,所以我把它留在这里:为了使图像使用 object-fit 属性成功适合 div,您需要定义图像的高度和宽度,否则将不起作用. 检查下面的代码片段以获取解决方案。
我正在尝试在我的页面上制作轮播。我有一个带有类的特殊 div 块,并且每个轮播元素.carousel
都有一个类。.carousel-entity
我需要将图像放置在 carousel 元素内的特殊 div 内,该元素称为:.carousel-image-holder
。但我不想手动裁剪图像,我更想object-fit: cover
在图像上使用,所以它会自动将图像粘贴在支架上。
问题:除了.carousel-image-holder
and之外,一切都加载得很好.carousel-image
。当先前的 div.carousel-entity
更改大小等时,它不适用于持有者。此外,对象拟合不能按预期工作。
我将不胜感激任何帮助!提前致谢!
.container {
background-color: royalblue;
margin-top: 10px;
margin-bottom: 10px;
}
.carousel {
max-width: 1080px;
position: relative;
margin: 10px;
}
.carousel-entity {
display: inline-block;
margin-left: 2px;
width: 250px;
height: 200px;
background-color: #ffffff;
color: #ffffff;
}
.carousel-image {
border: 1px black solid;
width: 100%;
height: 200px;
object-fit: cover;
}
.carousel-description {
color: black;
margin: 1px;
}
<div class="container">
<div class="carousel">
<div class="carousel-entity">
<img class="carousel-image" src="https://i.picsum.photos/id/328/600/200.jpg?hmac=vUUwo5NAN5eVJtmPoVnITBdWLD3Y4gXEROwi2m1IKts" />
<div class="carousel-description">
<h6>User</h6>
<p>Post name</p>
</div>
</div>
<div class="carousel-entity">
<img class="carousel-image" src="https://i.picsum.photos/id/328/600/200.jpg?hmac=vUUwo5NAN5eVJtmPoVnITBdWLD3Y4gXEROwi2m1IKts" />
<div class="carousel-description">
<h6>User</h6>
<p>Post name</p>
</div>
</div>
<div class="carousel-entity">
<img class="carousel-image" src="https://avatars.mds.yandex.net/get-pdb/231404/bd502155-a1c2-47e6-964e-bc0aaee31fde/s1200" />
<div class="carousel-description">
<h6>User</h6>
<p>Post name</p>
</div>
</div>
<div class="carousel-entity">
<img class="carousel-image" src="https://avatars.mds.yandex.net/get-zen_doc/1714257/pub_5d73b490f73d9d00ae3d3223_5d73b6571febd400ac931190/scale_1200" />
<div class="carousel-description">
<h6>User</h6>
<p>Post name</p>
</div>
</div>
</div>
<br>
</div>
解决方案
只需给图像一个max-width: 100%
和height: auto;
你很高兴。
.carousel-image {
object-fit: cover;
max-width: 100%;
height: auto;
}
已编辑。基于图像中显示的所需输出。我认为这是实现它的最佳方式。如果这不是您需要做的,请告诉我。
.container {
background-color: royalblue;
margin-top: 10px;
margin-bottom: 10px;
}
.carousel {
max-width: 1080px;
position: relative;
margin: 10px;
background: rebeccapurple;
}
.carousel-entity {
display: inline-block;
margin-left: 2px;
width: 250px;
/* height: 200px; */
background-color: #ffffff;
color: #ffffff;
}
.carousel-image-holder {
/* margin: 5px; */
max-height: 200px;
height: 200px;
min-height: 200px;
margin-bottom: 5px;
border: 1px black solid;
}
.carousel-image {
/* object-fit: cover; */
max-width: 100%;
height: 100%;
}
.carousel-description {
color: black;
margin: 1px;
}
<div class="container">
<div class="carousel">
<div class="carousel-entity">
<div class="carousel-image-holder">
<img class="carousel-image" src="https://i.picsum.photos/id/328/600/200.jpg?hmac=vUUwo5NAN5eVJtmPoVnITBdWLD3Y4gXEROwi2m1IKts" />
</div>
<div class="carousel-description">
<h6>User</h6>
<p>Post name</p>
</div>
</div>
<div class="carousel-entity">
<div class="carousel-image-holder">
<img class="carousel-image" src="https://avatars.mds.yandex.net/get-pdb/231404/bd502155-a1c2-47e6-964e-bc0aaee31fde/s1200" />
</div>
<div class="carousel-description">
<h6>User</h6>
<p>Post name</p>
</div>
</div>
<div class="carousel-entity">
<div class="carousel-image-holder">
<img class="carousel-image" src="https://i.picsum.photos/id/328/600/200.jpg?hmac=vUUwo5NAN5eVJtmPoVnITBdWLD3Y4gXEROwi2m1IKts" />
</div>
<div class="carousel-description">
<h6>User</h6>
<p>Post name</p>
</div>
</div>
<div class="carousel-entity">
<div class="carousel-image-holder">
<img class="carousel-image" src="https://i.picsum.photos/id/328/600/200.jpg?hmac=vUUwo5NAN5eVJtmPoVnITBdWLD3Y4gXEROwi2m1IKts" />
</div>
<div class="carousel-description">
<h6>User</h6>
<p>Post name</p>
</div>
</div>
</div>
<br>
</div>
推荐阅读
- android - 添加 layout_weight 时 Android 视图不可见
- typescript - 在 Typescript 中为数组定义接口
- google-app-maker - 数据源分页问题(已修订)
- python-3.x - 判断一个三角形是否直角
- python - 将数组转换为矩阵,其元素填充 Tensorflow 中矩阵的上三角形
- swift - 视图中没有工具栏的屏幕截图
- go - 如何组合 2 个结构内容,一个具有相同的键
- css - 为什么字体真棒图标在使用 :hover 缩放其大小时会旋转回原始位置?
- linux - gps 模块的 Linux 设备驱动程序
- node.js - 将文件从 React 上传到 S3 会出现 CORS 错误