0

Есть вот такая страница:

При уменьшении ширины экрана изображение само подстраивает пропорции и уменьшается введите сюда описание изображения

Но при уменьшении высоты изображение не подстраивается под экран. Как решить эту проблему? введите сюда описание изображения

  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
    <style>
        html,body{
            height: 100%;
            width:100%;
        }
        .image{
            position: relative;
            left: 15%;
            top: 15%;
            height:70%;
            width:70%;
        }
        #img{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="image">
    <img id="img" src="http://magic-kniga.ru/files/item_main_images/23000.jpg">
</div>

1 ответ 1

1

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  height: 70%;
  width: 70%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
<div>
  <img src="http://magic-kniga.ru/files/item_main_images/23000.jpg" />
</div>

Ваш ответ

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

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