Аспект заполняет изображение в соответствии с размером изображения

У меня есть много изображений в базе данных, которая имеет совершенно разные размеры. Я хочу удостовериться, что эти изображения имеют разрез этих изображений, поэтому они имеют одинаковый размер и соотношение сторон.Аспект заполняет изображение в соответствии с размером изображения

так что в зависимости от размера я хочу сделать что-то вроде этого, где div является желаемым размером, и изображение обрезается, если оно не соответствует размеру div. иллюстрации

enter image description here

Код:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <style type="text/css"> 
     body{ 
      font-family:"Helvetica Neue UltraLight",helvetica,verdana; 
      margin-left:0; 
      margin-right:0; 
      margin-top: 0; 
      width 100%; 
     } 
     section{ 
      padding-left:5px; 
      padding-right:5px; 
      font-size:12px; 
     } 
     h1{ 
      font-size: 16px; 
      padding-left:5px; 
     } 
     .main_image { 
      width: 100%; 
      height: 200px; 
     } 
     .main_image img{ 

      width: auto; 
      height:auto; 
     } 
    </style> 
</head> 
<body> 

    <div class="main_image"> 
     <img src="[[[main_image]]]" alt="" /> 
    </div> 
    <h1>[[[title]]]</h1> 
    <section> 
     <p>[[[full_text]]]</p> 
    </section> 
</body> 
</html>

источник

2015-05-14 Kæmpe Klunker

Установите изображение в качестве фона контейнера, и установить его размер, чтобы покрыть:

<div class="main_image" style="background-image:url([[[main_image]]])" title="[[[alt_desc]]]"></div> 

.main_image { 
    width: 100%; 
    height: 200px; 
    background-size: cover; 
}

Это будет масштабировать изображение пропорционально заполнить контейнер и «обрезать» избыток.

источник

2015-05-14 13:42:24

Установка 'alt' на' background-image' сложна. –

Верно, но вы можете установить атрибут 'title' на контейнере DIV, чтобы получить тот же эффект - описание доступности и всплывающую подсказку при зависании. Я отредактировал ответ выше, чтобы проиллюстрировать это. –

Должно быть относительно простым, чтобы центрировать его горизонтально и вертикально.

.main_image img{ 
     width: auto; 
     height: auto; 
     margin: auto; 
    }

источник

2015-05-14 13:43:47 riddler

Аспект заполняет изображение в соответствии с размером изображения

ответ

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