Как настроить размер изображения, чтобы он оставался пропорциональным - PullRequest
Новая
       19

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

2 голосов
/ 27 января 2020

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

В основном я хочу получить одно полноразмерное изображение (той же ширины, что и выровненный абзац). над ним). Ниже этого единственного изображения будет пробел, а затем будут два изображения рядом с пробелом между ними. Они будут на половину ширины изображения выше, и независимо от того, как вы масштабировали веб-браузер, чтобы он был больше или меньше, он сохранял бы одинаковые пропорции. Тогда у меня будет то же самое ниже с 3 изображениями ниже.

В идеале, должно быть изображение шириной 100%, следующие два ниже будут 50% каждое с пробелом между ними. Следующие три ниже будут 33%. Все картинки будут иметь даже интервал между ними. Как я могу это сделать?

Вот несколько вещей, которые я пробовал, которые не сработали:

1) 

<p class="has-text-align-justify">
<img class="wp-image-460" style="width: NaNpx;" src="https://..." alt="">

<img class="wp-image-458" style="width: 387px;" src="..." alt=""> &nbsp;

<img class="wp-image-459" style="width: 387px;" src="..." alt="">

</p>

2) 

<img src="https://..." style="float: left; width: 49%; margin-right: 1.0em; margin-bottom: 1.0em;">

<img src="https://..." style="float: left; width: 49%; float: right; margin-bottom: 1.0em;">

Ответы [ 2 ]

0 голосов
/ 27 января 2020

Другой пример использования flex. Недостатком моего решения является то, что вы получите некоторое расстояние слева и справа от изображений, но то же самое происходит с решением Рунина.

Разъяснения находятся в пределах кода CSS ниже. 

.container {
  display: flex;    /* display all children in a one-dimensional list */
  flex-wrap: wrap;  /* wrap child elements if it's needed */
}

.container > img {
  width: calc(100%/3);
  padding-bottom: 1rem;   /* 1rem = the font size of the document */
  padding-left: 0.5rem;   /* flex can take padding into consideration ... */
  padding-right: 0.5rem;  /* ... in comparison to using margin but ... */
  box-sizing: border-box; /* ... we need to set this value too */
}

.container > img:nth-child(1) {   /* first child in .container */
  width: 100%;
}

.container > img:nth-child(2),
.container > img:nth-child(3) {   /* second and third child in container */
  width: 50%;
}
<p class="has-text-align-justify">Hello world</p>

<div class="container">
  <img src="https://i.picsum.photos/id/11/200/200.jpg">

  <img src="https://i.picsum.photos/id/22/200/200.jpg">
  <img src="https://i.picsum.photos/id/33/200/200.jpg">
  
  <img src="https://i.picsum.photos/id/45/200/200.jpg">
  <img src="https://i.picsum.photos/id/58/200/200.jpg">
  <img src="https://i.picsum.photos/id/613/200/200.jpg">
</div>
0 голосов
/ 27 января 2020

В идеале должно быть изображение шириной 100%, следующие два ниже будут по 50% каждое с пробелом между ними. Следующие три ниже будут 33%. Все картинки будут иметь даже интервал между ними. Как я могу это сделать?

CSS Flexbox - идеальный инструмент для достижения того, что вы описываете.

Вы можете:

  • создайте три контейнера, каждый с display: flex
  • поместите одно изображение в первый контейнер, два во второй и три в третий
  • дайте каждому изображению flex значение flex: 1 0 30%

flex является сокращенным значением, сокращенно flex-grow, flex-shrink, flex-basis.

Здесь инструкция flex: 1 0 30% означает:

  • flex-grow приоритет 1 - ie. расти, когда вы не заполняете пространство
  • flex-shrink приоритет 0 - ie. не уменьшайте, независимо от того, сколько или сколько места осталось
  • flex-basis из 30% - используйте 30% вашего родителя в качестве начальной ширины, прежде чем увеличивать или уменьшать

Рабочий пример: 

.image-container-row {
  display: flex;
}

img {
  flex: 1 0 30%;
  height: 45px;
  margin: 6px;
  border: 1px solid red;
}
<div class="image-container">

<div class="image-container-row">
<img class="wp-image-455" alt="Image - 100%">
</div>

<div class="image-container-row">
<img class="wp-image-456" alt="Image - 50%">
<img class="wp-image-457" alt="Image - 50%">
</div>


<div class="image-container-row">
<img class="wp-image-458" alt="Image - 33%">
<img class="wp-image-459" alt="Image - 33%">
<img class="wp-image-460" alt="Image - 33%">
</div>

</div>

Последующие упражнения для практики flex:

Flexbox Froggy - игра для изучения flexbox

...