我有下面的代码和以下问题:
图片容器应为正方形,并具有:
height: 5.5rem;
width: 5.5rem;
但不遵守此尺寸。
.slider {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.items {
justify-content: center;
margin: 0 auto;
position: relative;
display: flex;
}
.item {
display: flex;
flex-direction: row;
left: 0;
outline: 0;
top: 0;
opacity: 0;
position: absolute;
visibility: hidden;
z-index: -1;
}
.item.show {
position: relative;
opacity: 1;
visibility: visible;
z-index: 9;
}
.image {
height: 5.5rem;
margin: 0 0.5rem 0 0;
width: 5.5rem;
align-items: center;
padding: .5rem;
display: flex;
border: 1px solid black;
}
.image img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
}
}
<div class="slide">
<div class="items">
<div class="item show">
<div class="image">
<img src="https://via.placeholder.com/150">
</div>
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of</div>
</div>
<div class="item">
<div class="image">
<img src="https://via.placeholder.com/150">
</div>
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a software like Aldus
PageMaker including versions of Lorem Ipsu</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
我刚刚在.image中添加了flex-shrink:0;
,它的工作原理是:)
.slider {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.items {
justify-content: center;
margin: 0 auto;
position: relative;
display: flex;
}
.item {
display: flex;
flex-direction: row;
left: 0;
outline: 0;
top: 0;
opacity: 0;
position: absolute;
visibility: hidden;
z-index: -1;
}
.item.show {
position: relative;
opacity: 1;
visibility: visible;
z-index: 9;
}
.image {
height: 5.5rem;
margin: 0 0.5rem 0 0;
width: 5.5rem;
align-items: center;
padding: .5rem;
display:flex;
border: 1px solid black;
flex-shrink: 0;
}
.image img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
}
}
<div class="slide">
<div class="items">
<div class="item show">
<div class="image">
<img src="https://via.placeholder.com/150">
</div>
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of</div>
</div>
<div class="item">
<div class="image">
<img src="https://via.placeholder.com/150">
</div>
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a software like Aldus PageMaker including versions of Lorem Ipsu</div>
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
如果您想要静态的宽度和高度,则可以设置 min 和 max 宽度和高度,因此:
.image {
min-height: 5.5rem;
min-width: 5.5rem;
max-height: 5.5rem;
max-width: 5.5rem;
}