Нужно изображение, чтобы быстро заполнить отзывчивую площадь - PullRequest
0 голосов
/ 22 декабря 2018

Вот мой код jsfiddle.

<div class="gallery-thumbnail">
    <a href="google.com">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/13Vend%C3%A9miaire.jpg/1024px-13Vend%C3%A9miaire.jpg" />
    </a>
</div>

.gallery-thumbnail {
    display: flex;
    max-width: 400px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: silver;
}
.gallery-thumbnail a { /* This magic makes a square, because the padding % is of the element's width. */
    height: 0;
    padding-bottom: 100%;
}
.gallery-thumbnail img {
  position: relative;
  object-fit: cover;
  width: 100%;
  background-color: green;
}

https://jsfiddle.net/hgw7s9qf/

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

Как мне сделать так, чтобы это изображение отвечало по размеру, заполняло квадрат так, как можно было бы ожидать, что object-fit: cover будет работать, но при этом сохранит область какдинамически изменяемый размер квадрата?

Важно: мне нужно, чтобы он был отзывчивым, поэтому квадрат сжимается, как и окно, и изображение внутри тоже должно быть.

Ответы [ 3 ]

0 голосов
/ 22 декабря 2018

Чтобы сделать изображение правильно квадратным, вам нужно указать одинаковую высоту и ширину изображения.Вы можете попробовать вот так

<div class="square">
  <div class="content">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/13Vend%C3%A9miaire.jpg/1024px-13Vend%C3%A9miaire.jpg" alt="">
  </div>
</div>

.square {
    border: 5px solid red;
    text-align: center;
    width: 50vw;
    height: 50vw;
  }

.content {
}
.content img{
  height: 50vw;
  width: 50vw;
}

Рабочая скрипка

Квадратное изображение

0 голосов
/ 22 декабря 2018

Я нашел способ.

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

.gallery-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}
.gallery-thumbnail img {
    position:absolute;
    object-fit: cover;
    width:100%;
    height:100%;
}

https://jsfiddle.net/7f13rnvu/

0 голосов
/ 22 декабря 2018

Я не совсем уверен, какова ваша конечная цель, но с той же разметкой, я получил это на работу:

.gallery-thumbnail {
    max-width: 400px;
    background: red;
}
.gallery-thumbnail img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 400px;
}

После прочтения это , я думаю, что изображениенужны width и height для object-fit, чтобы творить свою магию в соответствии с размерами image .

Надежда, которая помогает.

...