html - flex 父级中的图像在 chrome 中没有溢出
问题描述
我的图像在 Chrome 上表现异常,并且缩小了。我正在尝试实现像 Firefox 一样的效果,但图像没有溢出,而是缩小了。
这是我的代码。在 chrome 和 Firefox 中检查我的第二张卡片图像:
<div class="card-group">
<div class="card">
<div class="card__imgContainer">
<img class="card__img" src="https://www.pierrot-bg.com/images/news/2.jpg" alt="Меко казано" style="">
</div>
<div class="card__content">
<h2 class="card__heading">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet..</h2>
<div class="card__info">
<span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
<span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
</div>
<div class="card__buttons">
<a class="button card__button" href="./spectacle.html">Виж повече</a>
<a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
</div>
</div>
</div>
<div class="card">
<div class="card__imgContainer">
<img class="card__img" src="https://www.pierrot-bg.com/images/news/Meko-kazano_1.jpg" alt="Меко казано" style="">
</div>
<div class="card__content">
<h2 class="card__heading">Lorem, ipsum.</h2>
<div class="card__info">
<span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
<span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
</div>
<div class="card__buttons">
<a class="button card__button" href="./spectacle.html">Виж повече</a>
<a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
</div>
</div>
</div>
</div>
.card {
& {
display: flex;
flex-direction: column;
position: relative;
width: 60%;
}
&__imgContainer {
flex: 1 1 auto;
display: flex;
justify-content: center;
overflow: hidden;
}
&__img {
display: block;
flex: 1 1 0;
width: 100%;
}
&__content {
padding: 10px 30px 15px;
background: #4821f5;
/* Old browsers */
background: -moz-linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#4821f5", endColorstr="#3b8dd4", GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
&__info {
& {
margin-top: 15px;
margin-bottom: 10px;
}
&>* {
display: block;
font-size: 13px;
display: flex;
align-items: center;
}
&>*+* {
margin-top: 5px;
}
}
&__icon {
margin-right: 6px;
line-height: inherit;
}
&__heading {
font-size: 36px;
line-height: 1;
}
&__buttons {
& {
display: flex;
flex-wrap: wrap;
margin: -8px;
}
&>* {
margin: 8px;
}
}
&__button {
padding-top: 0.65em;
padding-bottom: 0.65em;
}
&__textbox {
margin-top: 20px;
}
}
.card-group {
display: flex;
flex-wrap: wrap;
margin: -1%;
&>* {
width: 31%;
margin: 1%;
}
}
我希望我的图像在 Firefox 中表现得像那样,并且像那样被剪切,我不想使用对象匹配。
解决方案
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
.card {
display: flex;
flex-direction: column;
position: relative;
width: 60%;
}
.card__imgContainer {
flex: 1 1 auto;
display: flex;
justify-content: center;
overflow: hidden;
}
.card__img {
display: block;
flex: 1 1 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.card__content {
padding: 10px 30px 15px;
background: #4821f5;
/* Old browsers */
background: -moz-linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#4821f5", endColorstr="#3b8dd4", GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
.card__info {
margin-top: 15px;
margin-bottom: 10px;
}
.card__info>* {
display: block;
font-size: 13px;
display: flex;
align-items: center;
}
.card__info>*+* {
margin-top: 5px;
}
.card__icon {
margin-right: 6px;
line-height: inherit;
}
.card__heading {
font-size: 36px;
line-height: 1;
}
.card__buttons {
display: flex;
flex-wrap: wrap;
margin: -8px;
}
.card__buttons>* {
margin: 8px;
}
.card__button {
padding-top: 0.65em;
padding-bottom: 0.65em;
}
.card__textbox {
margin-top: 20px;
}
.card-group {
display: flex;
flex-wrap: wrap;
margin: -1%;
}
.card-group>* {
width: 31%;
margin: 1%;
}
<div class="card-group">
<div class="card">
<div class="card__imgContainer">
<img class="card__img" src="https://www.pierrot-bg.com/images/news/2.jpg" alt="Меко казано" style="">
</div>
<div class="card__content">
<h2 class="card__heading">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet..</h2>
<div class="card__info">
<span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
<span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
</div>
<div class="card__buttons">
<a class="button card__button" href="./spectacle.html">Виж повече</a>
<a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
</div>
</div>
</div>
<div class="card">
<div class="card__imgContainer">
<img class="card__img" src="https://www.pierrot-bg.com/images/news/Meko-kazano_1.jpg" alt="Меко казано" style="">
</div>
<div class="card__content">
<h2 class="card__heading">Lorem, ipsum.</h2>
<div class="card__info">
<span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
<span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
</div>
<div class="card__buttons">
<a class="button card__button" href="./spectacle.html">Виж повече</a>
<a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
</div>
</div>
</div>
</div>
.card__img
必须给出一个height
of100%
和object-fit:cover
推荐阅读
- c# - 我在 c# vb 中的 System.speech 中有问题,问题是:没有安装识别器
- r - 从 lsmeans 生成矩阵对比返回
- linux - 无法:make install:Linux 内核模块 SSL 错误
- ios - CloudKit:订阅另一个用户的数据
- mysql - SQL Keep running count, after inner Join
- css - font-face 在 safari 上不起作用 [jsfiddle 示例]
- c# - 使用替换部分 URL
- android - 如何根据从 Android 数据库中获取数据的 Spinner 更改按钮的值?
- javascript - 在 Backround.js Chrome 扩展中使用匹配模式
- javascript - 提示中的取消按钮不会正确取消,但会继续到下一个警报。谁能解释一下?