我做了这个例子:
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .col {
flex-grow: 1;
flex-basis: 0;
}
.flex-row .content {
flex: 0 0 60%;
padding: 15px;
background: #b7bdbb;
}
.image {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.image img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
<div class="example">
<div class="flex-row">
<div class="col image">
<img src="https://via.placeholder.com/500x265" alt="">
</div>
<div class="col content">
some content
</div>
</div>
</div>
我希望我左边的图像被裁剪,但我希望我的内容能够决定.example
元素的整体高度。
目前,图像决定了整个元素的整体高度。我想要将图像裁剪为右列中内容的大小。它可以用我的例子吗?
如果我理解正确你想要你的右栏设置#example
的整体高度
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .col {
flex-grow: 1;
flex-basis: 0;
}
.flex-row .content {
flex: 0 0 60%;
padding: 15px;
background: #b7bdbb;
}
.image {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.image img {
flex-shrink: 0;
min-width: 100%;
max-width: 100%;
position: absolute;
}
<div class="example">
<div class="flex-row">
<div class="col image">
<img src="https://via.placeholder.com/500x265" alt="">
</div>
<div class="col content">
some content
</div>
</div>
</div>
你可以在父元素上使用position: relative
,在图像上使用position: absolute
并设置height: 100%
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .content {
flex: 0 0 60%;
padding: 15px;
background: #b7bdbb;
}
.image {
flex: 1;
position: relative;
}
.image img {
height: 100%;
position: absolute;
vertical-align: top;
}
<div class="example">
<div class="flex-row">
<div class="col image"><img src="https://via.placeholder.com/500x265" alt=""></div>
<div class="col content">some content</div>
</div>
</div>
我希望我左边的图像被裁剪,但我希望我的内容能够决定
.example
元素的整体高度。
当使用img
时,首先想到的是object-fit
,虽然因为它没有最好的浏览器支持,所以这里有一个使用background-image
。
通常,当使用background-image
时,可以在外部CSS中设置图像源,但有时候想要在标记中设置它,就像使用img
时那样。
在需要时经常被忽视的可能性是简单地使用style
属性,这个属性并不比src
上的img
属性复杂,在这里可以像这样设置标记源:style="background-image: url(...)"
我也用过flex-basis: calc(60% - 30px)
。这克服了IE中的2个错误,其中一个不能在速记calc
和flex
问题中使用border-box
在设置宽度中包含填充。
堆栈代码段
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .image {
flex-grow: 1;
background-position: center;
background-size: cover;
}
.flex-row .content {
flex-basis: calc(60% - 30px);
padding: 15px;
background: #b7bdbb;
}
<div class="example">
<div class="flex-row">
<div class="col image" style="background-image: url(https://via.placeholder.com/500x265)">
</div>
<div class="col content">
some content
</div>
</div>
</div>
如果您仍然需要(或必须)使用img
,这里有一个跨浏览器工作的示例。
从几个浏览器,i.a。 Safari(似乎是从第11节修复)和IE,有Flexbox和绝对定位弹性项目的问题,我在这里利用transform: translate
提供一个解决方案来居中图像。
堆栈代码段
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .image {
flex-grow: 1;
position: relative;
overflow: hidden;
}
.flex-row .image img {
position: absolute;
left: 0;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
.flex-row .content {
flex-basis: calc(60% - 30px);
padding: 15px;
background: #b7bdbb;
}
<div class="example">
<div class="flex-row">
<div class="col image">
<img src="https://via.placeholder.com/500x265)" alt="">
</div>
<div class="col content">
some content
</div>
</div>
</div>
您可以使用backgound-image
属性实现此目的
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .col {
flex-grow: 1;
flex-basis: 0;
}
.flex-row .content {
flex: 0 0 60%;
padding: 15px;
background: #b7bdbb;
}
.image {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-image:url('https://via.placeholder.com/500x265');
background-size:cover;
background-position:50% 50%;
}
.image img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
<div class="example">
<div class="flex-row">
<div class="col image">
</div>
<div class="col content">
some content
</div>
</div>
</div>