如何在CSS Display Flex中以"高度"为基础响应图像？

Question

我不擅长英语，但我会问你一个问题！

我正在学习flex，:(

(我用flex-basis根据比例激活它。 但是图像也会缩小以适应宽度(基于弹性(...:( 如果要释放图像宽度(100%(，则弯曲率被破坏。

我想固定图像高度。 像flex-basis一样收缩

如何在 CSSdisplay flex中height响应图像？

我以为你可能不明白这个问题。 我为您附加了一个网站和一个图像链接！

$(function(){
$(".c_pro_list li").each(function(e){
$(this).hover(function(e){
$(this).siblings().removeClass("c_on");
$(this).addClass("c_on");
}, function(e){
$(this).siblings().removeClass("c_on");
});
});
});

.c_pro_list > li {position: relative; padding:0 15px;}
.c_pro_info {position:absolute; bottom:1em; text-indent:1em;}
.c_pro_color li {float:left;}
li[class^="c_pro_list"] {overflow: hidden; display: flex; flex-direction: column; flex-basis: 25%;}
div img {height: auto;}
li[class^="c_pro_list"] .c_pro_con {flex: auto;}
li[class^="c_pro_list"].c_on {flex-basis: 50%;}

<ul class="c_pro_list c_disf">
<li class="c_pro_list1 c_on">
<div class="c_pro_con">
<a href="">
<img src="/img/pro-1.png" alt="제품이미지1">
</a>
</div>
</li>
<li class="c_pro_list2"></li>
<li class="c_pro_list3"></li>
</ul>

图片链接

https://cuveloper.github.io/flexTest/img/스택질문.PNG

一个类似的网站在这里。 但是这个网站没有使用flex

http://www.justfog.com/renew_2019/

这是我的测试链接...

https://cuveloper.github.io/flexTest/index.html

谢谢！

Answer 1

我希望这对您来说是很好的解决方案

$('.photo').on('click', function(e){
if(!$(e.target).hasClass('active')) {
$('.photo').removeClass('active')
$(e.target).addClass('active')
}
})

.wrapper {
display: flex;
height: 200px;
width: 100%;
}
.photo {
height: 200px;
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
background-origin: padding-box;
border: solid 3px #ffffff;
flex-basis: 25%;
transition: flex-basis 0.3s ease-out;
cursor: pointer;
}
.photo.active {
flex-basis: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="photo active" style="background-image: url(https://img-ik.cars.co.za/images/2017/8/Teslamodel3/tr:n-news_large/presskit-model-3.jpg);" ></div>
<div class="photo" style="background-image: url(https://cnet4.cbsistatic.com/img/L2R9i7W2t6VkeKweGEMnERNpq_A=/2019/06/28/f7acb1bd-fa51-4063-b7c8-c79deb124684/tesla-model-s-promo.jpg);" ></div>
<div class="photo" style="background-image: url(https://img-ik.cars.co.za/images/2017/8/Teslamodel3/tr:n-news_large/presskit-model-3.jpg);" ></div>
</div>