0

Здравствуйте, ребята. Мне нужно поместить картинки товаров в блок 280x200, так, чтобы блок полностью заполнился и картинки не поменяли свои пропорции, если пропорции мешают, то обрезать, то есть не надо, чтобы картинка растягивалась, а просто обрезалась. Я пытался разными способами, но не получилось.

1

1 ответ 1

4

1) Устанавливай картинку фоном и задай ей размер cover:

.block {
  width: 280px;
  height: 200px;
  background-image: url(https://www.gravatar.com/avatar/0e701b6571349036da776281d23d065a?s=300&d=identicon&r=PG&f=1);
  background-size: cover;
  background-position: center;
  border: 2px solid #000;
}
<div class="block"></div>

2) Вариант с позиционированием:

.block {
  position: relative;
  width: 280px;
  height: 200px;
  border: 2px solid #000;
  overflow: hidden;
}

.block > img {
  width: 100%;
  height: auto;
}
<div class="block">
  <img src="https://www.gravatar.com/avatar/0e701b6571349036da776281d23d065a?s=300&d=identicon&r=PG&f=1">
</div>

Но с этим вариантом морока, так как ты не знаешь по ширине ровнять на всю или по высоте.

Если это идею развивать, то можно с помощью PHP определять размер картинки: картинка больше по ширине или высоте. Если картинка больше по ширине, то устанавливать класс .imgh, и этот класс будет устанавливать размер картинке {width: auto; height: 100%}, а если больше высота, то ставить .imgv, который будет иметь размеры {width: 100%; height: auto}.

Пример:

.block {
  position: relative;
  width: 280px;
  height: 200px;
  border: 2px solid #000;
  overflow: hidden;
}

.block > img {
  width: 100%;
  height: auto;
}

.block > img.imgh {
  width: auto;
  height: 100%;
}
.block > img.imgv {
  width: 100%;
  height: auto;
}
<h3>Берём картинку, где ширина больше высоты</h3>

<p>И видим, что по высоте картинка не полная:</p>
<div class="block">
  <img src="https://upload.wikimedia.org/wikipedia/ru/f/f9/Generator_Company.jpg">
</div>

<h3>Для нормального определения, нужно определять в PHP, что больше, ширина или высота</h3>

<p>Если ширина больше, то устанавливаем класс с размерами {width: auto; height: 100%}</p>
<div class="block">
  <img src="https://upload.wikimedia.org/wikipedia/ru/f/f9/Generator_Company.jpg" class="imgh">
</div>


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

16
  • Минус мой. Я вот считаю, что если спрашивают о том, как работать с картинкой (в данном случае, картинкой товара), то такой совет бесполезен. В продакшене интернет-магазинов это в 95% случае не применимо. 11 мар 2017 в 18:34
  • @SashaOmelchenko, а в продакшене соц. сетей и прочих сайтов только это и используют. С картинками мороки много. Ну если хотите, сейчас добавлю картинкой
    – Yuri
    11 мар 2017 в 18:37
  • такой ответ мне уже нравится больше ) а почему это с картинками много мороки? 11 мар 2017 в 18:40
  • мой случай интернет магазин и я не понимаю, как первый вариант использовать с background-image: url, потому-что картинка берется с бд с помощью php
    – Dem
    11 мар 2017 в 18:41
  • @Dem, в style можно вставлять. Я на своём сайте так и сделал. Ну или можете определять в PHP, что у картинки больше, ширина или высота. Дальше применяете специальный класс, который будет по высоте или ширине ровнять на всю.
    – Yuri
    11 мар 2017 в 18:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.