如何在css display flex中以“高度”为基础响应图像？

Question

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

我正在学习flex 并且遇到问题:((

我用flex-basis按比例激活。 但图像也会缩小以适应宽度（flex-basis）...... :( 如果要释放图像宽度（100%），则弯曲比例被破坏。

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

如何在 css display 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>