Как растянуть блок по высоте картинки?

#html #css #wordpress #css3 #frontend

Есть блок, внутри которого картинка. Нужно сделать высоту по картинке.
Танцую вокруг него уже 2 день, помогите.

 




                                          
 


СSS

    .blog-post .img-box.height-240 {
    min-height: 240px;
    max-height: 500px;
    height: 100%;
    width: 100%;
}
.blog-post .img-box {
    position: relative;
    margin-bottom: 15px;
}   
.blog-post img {
display: block;
max-width: 100%;
min-height: 100%;
margin: 0 auto;

}

.blog-post img {
    height: auto;
    width: 100%;
}


Если поставить высоту картинки 100%, а не auto, то картинку сожмет в этом блоке с
высотой 240px!
    

Ответы

Ответ 1

Используйте flex. В примере ниже - минимальный код для картинки в картинке.



.layer {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: no-repeat;
  background-size: cover;
}

.layer img {
  height: 80%;
  width: auto;
}

  



Ответ 2

блок в блоке и т д. Некоторые блоки имеют абсолютное позиционированние. Нужно, чтобы
просто был див, внутри которого картинка, которая имеет стили: width: 100%; height:
auto. При таких расклидах такая картинка всегда будет оптимизироваться под ширину,.
А еще у тебя в некоторых блоках overflow: hidden - этот стиль  обрезает все, что не влезло
у верхнего блока убери минимальную и максимальную высоту (img-box )

у блока .background убери: высоту, оверфлоу, а позишн поставь static

у .layer убери оверфлоу и позишн

у самого изображения убери позишн, сделай его статичным
 вроде так.
 там не нужно вкладывать блок в блок. просто img вложи в блок. блок не делай абсолютным.
потому, что когда он абсолютный, но без указанной высоты, то его высота будет 0, если
картинка тоже абсолютная. А настройка overflow: hidden обрежет все, что не поместилось

 





этому диву пожно указать ширину. Чтобы внутри еще кнопки аюсолютные были, дай этому
диву position: relative
 и проблем не будет


Ответ 3

Указать

img {
width:100%;
height:100%;
background-size:cover;
}