SASS, задать высоту изображению, исходя из его ширины

#css #изображения #sass

Изображение должно занимать 100% ширины блока. Блок резиновый, до определённых моментов.
Мне нужно, чтобы высота изображения была в 3,3 раза меньше, чем ширина. Как это задать
в SASS?
    

Ответы

Ответ 1

Вариант с img {position: absolute;}



.container {
  max-width: 400px;
  width: 100%;
}

.image {
  height: 0;
  padding-bottom: 30%;
  position: relative;
  width: 100%;
}

img {
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

  

        
  
  

        
  
  

        
  





Или смотреть на jsfiddle

Вариант с инлайновым background-image



.container {
  max-width: 400px;
  width: 100%;
}

.image {
  background-position: 50% 50%;
  background-size: cover;
  height: 0;
  padding-bottom: 30%;
  position: relative;
  width: 100%;
}

  

  

  






Или смотреть на jsfiddle


Ответ 2

Можно сделать вот так:



.wrapper {
    width: 100%; 
}

.wrapper-inner {
    position: relative;
    height: 0;
    border: none;
}

.ratio-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #eee;
}

.xwrapper {
    padding-top: 30.30%; /* 100% ширины делим на 3.3 */
}
img{
  max-height: 100%
}