Css для автоматической настройки изображения определенного размера div

У меня есть div, в котором я определил следующие правила CSS

<style>
    .image-preview {
        height: 600px;
        width: 50%;
        border: 1px solid red;
    }

    .image {
        width: auto;
        height: 600px;
    }
</style>

<div class="image-preview">
    <img src="abc.jpg" class="image">
</div>

Предположим, что если width:50% - это 300px, а abc.jpg - это 500px, он выходит из div. Я хочу, чтобы изображение в div было выровнено по центру и с сохранением его соотношения сторон.

Я дал width:auto, но он не работает. У меня нет большого опыта работы с CSS, поэтому, пожалуйста, не обращайте внимания, если это слишком просто, чтобы спрашивать.

Спасибо!!

Ширина .image{width: 100%;}: 100% - это база отзывчивого. Если вы хотите сохранить соотношение сторон, не устанавливайте высоту.

Nicholas Nur 11.04.2018 14:22
0
1
50
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Попробуйте использовать flexbox, который, вероятно, является лучшим инструментом для выравнивания элементов в div. Вы можете узнать об этом подробнее здесь: https://www.w3schools.com/csS/css3_flexbox.asp.

    .image-preview {
        height: 600px;
        width: 600px; /*whatever you want*/
        border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image {
        height: 400px; /*Any value would still keep it vertically centered thanks to the align-items property*/
        width: auto;
    }
<div class="image-preview">
    <img src="https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937%21Example.jpg" class="image">
</div>

Свойство justify-content обрабатывает горизонтальное выравнивание, а свойство align-items обрабатывает вертикальное выравнивание.

Ответ принят как подходящий

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

.image-preview {
        height: 600px;
        width: 50%;
        border: 1px solid red;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .image {
       max-width:100%;
       max-height:100%;
    }
    
<div class="image-preview">
    <img src="http://via.placeholder.com/500x150" class="image">
</div>

Я фиксирую высоту контейнера div. Есть ли способ динамически установить высоту на основе высоты родительского div?

Sunil Garg 11.04.2018 14:37

Да, это просто использование высоты с процентами ... на изображении, будьте осторожны, если вы используете это, вам может потребоваться удалить свойство max-height, чтобы оно не потеряло свое соотношение сторон ..

Renzo Calla 11.04.2018 14:40

Итак, изображение - это встроенный элемент:

img {
   display: block;
   margin: 0 auto; //this is center your image
   height: auto; // this will make it ration
   max-width: 1200px; //or whatever is the size of your image
}

Это сделает ваше изображение полностью отзывчивым, центрированным и рациональным.

  .image-preview {
    border: 1px solid red;
    box-sizing: border-box;
    height: 600px;
    padding: 10px;
    text-align: center;
    width: 50%;
}

    .image {
        width: auto;
        height: 100%;
        max-width:100%;
    }
<div class="image-preview">
    <img src="https://placeimg.com/300/600/any" class="image">
</div>

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

Другие вопросы по теме