Keep Image Ascpect Ratio - PullRequest
Новая
       65

Keep Image Ascpect Ratio

0 голосов
/ 10 марта 2020

Я сейчас занимаюсь рефакторингом своего сайта и пытаюсь избавиться от нескольких точек останова. В моем портфолио есть галерея изображений, в которой отображаются плитки размером 3х3. Эти плитки построены с сеткой css. Плитки в моем примере должны иметь высоту 200px и минимальную ширину (200px, 333px).

В настоящее время плитки работают как положено. Но изображения не сохраняют свои пропорции. Есть ли способ сохранить исходное соотношение и обрезать изображения по высоте? Наименьшая версия контейнера должна быть 200x200.

https://codepen.io/yanniksturm/pen/LYVegro

<div class="content">

  <div id="img1" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>
  <div id="img2" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>
  <div id="img3" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>

</div>

.content {
  min-width: 600px;
  max-width: 999px;
  margin: auto;
  width: 80%;
    backgeound-color: red;
  display: grid;
  grid-template-columns: minmax (200px, 333px) minmax (200px, 333px) minmax (200px, 333px);
  grid-template-rows: 200px;

}

.imageWrapper {
  height: 100%;
  width: 100%;

}

img {
   height: 100%;
  width: 100%;

}

#img1 {
  grid-column: 1;
}
#img2 {
 grid-column: 2;
}

#img3 {
  grid-column: 3;
}

Большое спасибо за вашу помощь!

1 Ответ

1 голос
/ 10 марта 2020

Вам необходимо установить ширину и высоту img на auto и добавить к ней max-width: 100%;, чтобы сохранить соотношение сторон. 

img {
  height: auto;
  width: auto;
  max-width: 100%;
}

См. Фрагмент ниже.

Вы можете использовать object-fit: cover;, но это не поддерживается в старых браузерах (я смотрю на IE11). 

.content {
  min-width: 600px;
  max-width: 999px;
  margin: auto;
  width: 80%;
  backgeound-color: red;
  display: grid;
  grid-template-columns: minmax (200px, 333px) minmax (200px, 333px) minmax (200px, 333px);
  grid-template-rows: 200px;
}

.imageWrapper {
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

img {
  height: auto;
  width: auto;
  max-width: 100%;
}

#img1 {
  grid-column: 1;
}

#img2 {
  grid-column: 2;
}

#img3 {
  grid-column: 3;
}
<div class="content">

  <div id="img1" class="imageWrapper">
    <img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>
  <div id="img2" class="imageWrapper">
    <img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>
  <div id="img3" class="imageWrapper">
    <img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>

</div>
...