css - 当父/浏览器缩小时缩小子元素的相对位置,使用溢出的父元素
问题描述
在下面的代码中,我有一个轮播代码。
仅显示一部分图像( ),并使用 javascript 向左/向右移动container
包含所有图像()的 div 。items
如果浏览器窗口缩小the container
变得更小,则可以缩小图像
图像(item
)的数量不是固定的。
.carousel {
max-width: 70%;
margin: 1.5rem 1.5rem 0 1.5rem;
position: relative; }
.container {
margin: 0;
padding: 1rem 0;
position: relative;
overflow: hidden; }
.items {
display: flex;
flex-direction: row;
left: 0;
position: relative;
top: 0;
transition: 0.2s; }
.item {
cursor: pointer;
height: 9.375rem;
padding: 0.5rem;
transition: 0.2s;
width: 9.375rem;
}
<div class="carousel" >
<div class="container">
<div class="items">
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
</div>
</div>
</div>
解决方案
目前,您使用 rem 作为量词,它基于根元素的字体大小,但我没有看到您根据媒体查询调整任何有关字体的内容。如果您不是特别需要像 100x100 这样的精确测量值,那么我建议您使用视口量词,因为当您的浏览器缩小时这些值会发生变化。我为外观添加了一个 flex-wrap 属性,如果您愿意,您可以删除它并添加回溢出
<meta name="viewport" content="width=device-width,initial-scale=1.0">
.carousel {
max-width: 70%;
margin: 1vw 1vw 0 1vw;
position: relative; }
.container {
width:100%;
margin: 0;
padding: 1vw 0;
position: relative; }
.items {
display: flex;
flex-direction: row;
flex-wrap : wrap;
left: 0;
position: relative;
top: 0; }
.item img {
cursor: pointer;
height: 10vw;
margin:1vw;
transition: 0.2s;
width: 10vw;
}
推荐阅读
- javascript - 当用户滚动到新部分时,我需要使用 addEventListener 向部分添加“活动”类
- angularjs - 如何在 AngularJS 上获取特定月份
- firebase - 如何为 firebase 中的文档自动 uid?
- python - 从 docker-compose 中获取公开的端口
- r - eval 中的 glm 错误(family$initialize):y 值必须是 0 <= y <= 1 但值是 0 和 1
- laravel - Laravel 8.X 选择所有最新状态的记录
- samba - smbclient NT_STATUS_LOGON_FAILURE 带有“无法对 IP 地址执行 GSE”
- swift - 带有可编码返回数组的 Swift Rest API 调用
- c++ - 如何分隔具有重复字符的字符串
- android - 使用 Moshi 和 Retrofit 解析动态字符串对象