Различные взгляды на рабочем столе, как настроить

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

Вот код:

<div class="container" style="cursor:pointer;" onclick="clickToShow();">
  <img src="images/mypicoo.jpg" alt="Norway" style="width:100%; height: auto;">
</div>
.container {
  position: relative;
  margin-top: 10px;
}

javascript,jquery,html,css,

-6

Ответов: 2

1 принят

Вы также можете использовать медиа-запросы. На экранах размером менее 600 пикселей . контейнер { позиция : относительная ; margin-top : 10px ; } img { width : 100% ; высота : авто ; } экран @media и ( min-width : 600px ) { img { width : auto ; } } изображение будет шириной 100%. На экранах шириной более 600 пикселей ширина изображения автоматически означает размер изображения. Возможно, вы захотите настроить этот 600px для вашего проекта.

<div class="container" style="cursor:pointer;" onclick="clickToShow();">
  <img src="https://cdn.pixabay.com/photo/2018/08/14/05/17/crow-3604685_960_720.jpg" alt="Norway">
</div>
max-width

1

Вам нужно просто добавить widthвместо widthследующего:

.container {
        position: relative;
        margin-top: 10px;
                background:#ccc;
}
<div class="container" style="cursor:pointer;" onclick="clickToShow();">
    <img src="https://mypicot.com/img/pt-2620.jpg" alt="Norway" style="max-width:100%; height:auto">
</div>

JavaScript, JQuery, HTML, CSS,
Похожие вопросы
Яндекс.Метрика