img сужается в виджете

232
21 декабря 2016, 03:03

Верстаю виджет и возникла проблема, когда уменьшаю окно, рисунок виджета уменьшается, дело все в объеме текста, ширина img фиксированна, сделан блок на флексах.

.widget{ 
  position: relative; 
  width: 100%; 
  padding-top: 65px; 
  padding-bottom: 65px; 
  border: 1px solid @border; 
  margin-bottom: 63px; 
 
  &__title{ 
    font-size: 30px; 
    font-weight: 400; 
    line-height: 40px; 
    margin-bottom: 19px; 
    letter-spacing:6px; 
  } 
   
   &__cont{ 
    padding-left: 61px; 
    padding-right: 61px; 
    padding-top: 26px; 
    width: 100%; 
  } 
 
  &__post{ 
    position: relative; 
    width: 100%; 
    margin-bottom: 12px; 
    display: flex; 
    flex-direction: row; 
 
  } 
 
 
 
  &__img{ 
    margin-right: 38px; 
    max-width: 114px; 
    width: 100%; 
    height: 65px; 
    overflow: hidden; 
  
 
    >a{ 
      display: block; 
    } 
 
    img{ 
      height: 100%; 
    } 
  } 
 
 
 
  &__posttitle{ 
 
    line-height: 20px; 
    font-size: 15px; 
    font-weight: 400; 
    letter-spacing:3px; 
  } 
 
  &__posttitle-pos{ 
    margin-top: -5px; 
    margin-bottom: 8px; 
  } 
 
  &__date{ 
    color: @tags; 
    font-size: 15px; 
    font-weight: 400; 
    letter-spacing:3px; 
  } 
 
 
}
<div class="widget"> 
                    <h3 class="title widget__title main-text"><span></span>LATEST POSTS</h3> 
                    <div class="widget__cont"> 
                        <div class="widget__post"> 
                            <div class="widget__img hidden-xs "><a href=""><img src="/img/wpost1.jpg" 
                                                                                         alt=""></a></div> 
                            <div class="widget__about"> 
                                <a href=""><h4 class="widget__posttitle widget__posttitle-pos main-text hover__title"> 
                                    Living in Los 
                                    Angeles </h4></a> 
                                <span class="widget__date main-text">OCTOBER 16, 2016</span> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="widget__cont"> 
                        <div class="widget__post"> 
                            <div class="widget__img hidden-xs "><a href=""><img src="/img/wpost2.jpg" 
                                                                                         alt=""></a></div> 
                            <div class="widget__about"> 
                                <a href=""><h4 class="widget__posttitle widget__posttitle-pos main-text hover__title">10 
                                    LIFE 
                                    CHANGING MOMENTS 
                                    FROM 10 YEARS AS A NOMAD 
                                    around the world </h4></a> 
                                <span class="widget__date main-text">OCTOBER 16, 2016</span> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="widget__cont"> 
                        <div class="widget__post"> 
                            <div class="widget__img hidden-xs "><a href=""><img src="/img/wpost3.jpg" 
                                                                                         alt=""></a></div> 
                            <div class="widget__about"> 
                                <a href=""><h4 class="widget__posttitle widget__posttitle-pos main-text hover__title">MY 
                                    GUIDE TO 
                                    ASIAN 
                                    FOOD</h4></a> 
                                <span class="widget__date main-text">OCTOBER 16, 2016</span> 
                            </div> 
                        </div> 
                    </div> 
                </div>

Answer 1

Чтобы потомок флекс-контейнера не уменьшался, ему необходимо задать свойство flex-shrink: 0. В вашем случае, это свойство необходимо добавить блоку .widget__img.

Answer 2

У вас же стоит максимальная ширина, а потом относительная. То есть по размеру родительского элемента и строится

&__img{max-width: 114px;
    width: 100%;}

Надо менять на что-то типа

width: 100px;
READ ALSO
Эффект матового стекла

Эффект матового стекла

Как на плитках сделать эффект матового стекла? Те

733
Как адаптировать виджеты вк? [требует правки]

Как адаптировать виджеты вк? [требует правки]

Подскажите, как то вообще возможно адаптивить виджет вк? Во время его генерации можно задавать ширину виджета, но она задается в пикселях...

304