Установите высоту изображения до 75% от его контейнера

У меня есть отзывчивый список изображений. Каждое изображение находится внутри контейнера. Я хочу контейнер изображения, чтобы быть 75% от его первого контейнера (блок контейнера в данном случае)Установите высоту изображения до 75% от его контейнера

рацион изображения составляет 1: 1

Я играл немного с процентным контейнером изображений шириной, но он чувствует, как это не решение.

<ul class="list-inline unit_list "> 
<li class="unit_list_item col-xs-24 col-sm-12 col-md-8"> 
    <a href='#' alt="unit"> 
     <div class="unit_container"> 
      <div class="icon_container unit_icon"> 
       <img class="img-responsive unit_image" src="http://placehold.it/60X60" /> 
      </div> 
      <div class="unit_name">FREE</div> 
     </div> 
    </a> 
</li></ul>

Btw, я использую бутстрап, если это важно.

http://jsfiddle.net/wmu3w3ej/1/

источник

2014-09-23 user2587454

Согласитесь с ответом Flopet, проверьте это http://jsfiddle.net/sameerast/wmu3w3ej/3/ –

'transform: scale (0.75);' to '.unit_image'? - http://jsfiddle.net/rtndqhys/ – Anonymous

@SameeraThilakasiri Это не имеет никакого эффекта в этом случае, потому что у родителя нет явной высоты. –

Благодаря @Mary Melody

transform: scale(0.75);

работает как Magic

Я немного боюсь использовать его, так как это так просто.

любые мысли?

источник

2014-09-23 14:29:42 user2587454

Обычно это не то место, где вы задаете вопросы, но отвечаете на них, даже для себя. Transform имеет хорошую поддержку для современных браузеров, которые рассматривают здесь проблемы и какие браузеры поддерживают его: http://caniuse.com/#search=transform – Christina

извините .. :) и спасибо! – user2587454

Используя логику от здесь: https://stackoverflow.com/a/20117454/3389737

Я применил его к вашей ситуации: http://jsfiddle.net/phwaLmen/1/

#wrapper 
 
{ 
 
    position: relative; 
 
    width: 50%; 
 
    overflow: hidden; 
 
} 
 

 
#wrapper:before 
 
{ 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 75%; 
 
} 
 

 
#image 
 
{ 
 
    position: absolute; 
 
    top:  0; 
 
    left:  0; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div id="wrapper"> 
 
    <img src="http://placehold.it/350x350" id="image"> 
 
</div>

Добавить относительное позиционирование к родителю, установите его ширину, как вам хотелось бы и сделать e переполнение скрыто.

Создайте элемент :before для обертки с накладкой сверху 75%. Так как для #wrapper нет высоты, это 75% основано на ширине элемента :)

Затем у вас есть изображение, расположенное абсолютно, а затем установлено на контейнер. Если вы хотите, чтобы изображение было обрезано вместо изменения размера, удалите из него правила стиля height: 100% и width: 100%.

источник

2014-09-23 08:14:32 Luke

Спасибо, я попробовал это, но он не сохранил аспект рациона 1: 1 изображения. – user2587454

Вы просили 75%, поэтому он никогда не будет 1: 1, если вы не используете изображение, которое находится в этих пропорциях?Также, если вы удалите два последних стиля для изображения, как упоминалось, он обрезает его, а не изменяет его размер. – Luke

вы правы. sorrry. Я отредактировал мой вопрос – user2587454

Вы можете сделать это следующим образом (в вашем HTML):

<img src="img.jpg" height="75%" />

Удачи!

источник

2014-09-23 08:28:00

Установите высоту изображения до 75% от его контейнера

ответ

Смежные вопросы