Автоматическое изменение размеров изображений при изменении ширины / высоты браузера - PullRequest
Новая
       1

Автоматическое изменение размеров изображений при изменении ширины / высоты браузера

0 голосов
/ 04 июля 2018

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

РЕДАКТИРОВАТЬ: Я сделал все, что вы, ребята, посоветовали, но это все еще не работает. 

<!DOCTYPE html>
<html>

<body background="">

  <head>
    <style>
      div.asciigun {
         top: 30%;
         left: 50%;
         position: absolute;
         max-width: 100%;
  
      }
    </style>
  </head>

  <body>


    <div class="asciigun">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU7ROirglSjKnpsLvt29uCDlVtpZutirtiXyg3FF0UtXFf0TnE" height="90%" width="90%" >
      </div>

  </body>

</html>

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Хорошо, я понял это! Мне нужно было значение окна просмотра вместо%. Теперь изображения идут пропорционально размеру браузера и остаются на месте. 

div.asciigun {
    position: absolute;
    top: 30vw;
    left: 74vw;
    z-index: 1;
    width: 30vw;
    height: 15vw;
}
0 голосов
/ 04 июля 2018

Давайте попробуем другой подход. Старайтесь не изменять max-width или max-height. Просто оставьте все как есть (или установите width: 100% и height: 100%).

А затем измените <img src="url.jpg"> на background: url("url.jpg");, а затем просто сделайте 

.image {
    background-size: cover;
}

или 

.image {
    background-size: contain;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...