как адаптировать изображение на «высоте» в css display flex?

Question

Я плохо владею английским, но я задам вам вопрос!

Я учусь flex и у меня возникла проблема: ((

Я использовал flex-basis чтобы активировать его в соответствии с соотношением. но изображение также уменьшается в соответствии с шириной (flex-based) ... :( если освободить ширину изображения (100%), коэффициент гибкости был нарушен.

Я бы хотел, чтобы высота изображения была фиксированной. Сжатие, как flex-basis

Как адаптировать изображение на height основе в CSS 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>