Создание адаптивных карт материализации

Question

Мы используем материализованные карты для отображения изображений на нашем сайте. Изображения загружаются пользователем, поэтому они бывают разных размеров (хотя они должны быть больше 250 пикселей).

Мы можем поддерживать соотношение сторон изображений, что отлично, но мы не знаем, как это сделать, делая карты на каждой строке одинаковой высоты. Это наша цель - заставить карты иметь одинаковую высоту (реагирующим образом), сохраняя соотношение сторон изображений внутри карт.

Мы баловаться с этим весь день, не получая очень далеко. Буду признателен за любую оказанную помощь.

HTML:

<div class="row text-center"> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"interior"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Interior</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Drivetrain</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"performance"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Performance</h5> 
     </div> 
    </div> 
    </div> 
</div> 

CSS:

.card { 
    position: relative; 
    background-color: #f4f4f4; 
    // margin: 10px auto; 
    height: 100%; 
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.7); 
} 

.card { 
    height: 100%; 
} 

.card .card-image img { 
    //object-fit: contain !important; 
} 

Answer 1

Использование медиа запросов, чтобы установить ширину/высоту в зависимости от размера экрана. Пример в JS Fiddle: https://jsfiddle.net/3yegzwex/

HTML:

<div class="row text-center"> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"interior"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Interior</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Drivetrain</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"performance"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Performance</h5> 
     </div> 
    </div> 
    </div> 
</div> 

CSS:

.card { 
    text-align: center; 
} 

@media (max-width: 990px) { 
    .resizeimg { 
    height: auto; 
    } 
} 

@media (min-width: 1000px) { 
    .resizeimg { 
    width: auto; 
    height: 350px; 
    } 
} 

Answer 2

ли образы действительно должны быть инлайн? Или они могут быть установлены как background-image (поскольку они загружены пользователем)? Если это так, вы можете установить для свойства background-size значение cover. Также потому, что object-fit - not widely supported (пока).

крышка

Ключевое слово, которое является инверсией содержать. Масштабирует изображение как можно больше и поддерживает соотношение сторон изображения (изображение не не сжимается). Изображение «покрывает» всю ширину или высоту контейнера . Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево/вправо, либо сверху/снизу.

Источник: MDN

Смотрите this updated JSFiddle для демонстрации. padding-bottom может быть изменен в процентах для ваших нужд. Попытайтесь изменить его и посмотреть, что он делает.

---

Встроенные изображения

Если изображения должны быть рядный, вы можете применить это решение:

.card-image { 
    width: 100%; 
    padding-bottom: 50%; 
    overflow: hidden; 
    position: relative; 
} 

.card-image img { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

Изображение будет проталкиваться внутрь .card-image и потянулась к его ширине это необходимо. См. this JSFiddle для демонстрации. padding-bottom может быть изменен в процентах для ваших нужд. Попытайтесь изменить его и посмотреть, что он делает.