0

Здравствуйте.

У меня имеется список фото, и ниже к ним описание. Все фото по ширине должны быть 200px жестко, поэтому у тега img параметр width проставлен 200. Но сами фото по высоте разного размера. Поэтому описание у меня под фото идет лесенкой. Если я прописываю абсолютную длину, некоторые фото некрасиво растягиваются. Пытался сделать отдельный div с высотой, но тоже в итоге фото растягиваются.

А надо, чтобы к примеру чтобы фото размером 200х200 было такого размера, а фото 200х312 уменьшалось до 200х297, и у всех текст был ниже 297px

<div class="new">
<img src="../img/1733.jpg" width="200" height="297">
<br>описание
</div>

в css файле

new {
    float: left;
    padding: 10px;
    text-align: center;
    }

2 ответа 2

2

можно втиснуть фото в другой контейнер и обрезать "лишнее".

<div class="new">
    <div class="img-wrapper">
        <img class="some-class-for-img" src="../img/1733.jpg">
    </div>
    <br>описание
</div>

.img-wrapper {
    display: flex;
    height: 297px;
    width: 200px;
    overflow: hidden;
}

.some-class-for-img {
    min-width: 200px;
    min-height: 297px;
    margin: auto;
}

Второй вариант - сделать фото фоном для блока img-wrapper и назначить ему background-size: contains. Метод плох тем, что при печати страницы(Ctrl+P) все фотки пропадут

8
  • но тогда все фото больше 297, например 305 вылезут за границы 21 авг 2017 в 12:51
  • не вылезут. overflow: hidden; обрежет лишнее
    – Oleg
    21 авг 2017 в 12:52
  • но он получается обрежет, а как сделать так чтобы выше 297 не обрезало, а вписывало в 297 21 авг 2017 в 13:10
  • Тогда вы потеряете в ширине 200px. Изображение станет уже
    – Oleg
    21 авг 2017 в 13:11
  • это не критично для моего варианта 21 авг 2017 в 13:12
0

Засунуть картинку в блок. Если как фоновое изображение, то задать блоку свойство background-size: contain; Если как <img>, то задать изображению свойство Object-fit:scale-down (большое изображение будет вписано в блок, маленькое - отцентрировано) или Object-fit:contain (большое вписано, маленькое - растянуто и вписано).

Ваш ответ

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

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