Question

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

我正在研究flex并遇到问题：（（

我用flex-basis根据比例激活了它。但是图像也会缩小以适合宽度（flex-basis）... :( 如果要释放图像宽度（100％），则弯曲率会破坏。

我想固定图像高度。像flex-basis

一样缩小

如何在CSS height中以display flex为基础响应图像？

我认为您可能不理解这个问题。我为您附加了一个网站和一个图片链接！

$(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>

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

1 个答案: