Остановить изменение размера изображения с помощью медиа-запросов

126
17

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

Вот мой код:

CSS:


.header
{
height:100px;
width:100%;
}
.header img
{
width:100%;
}

@media screen and (min-width:1000px;)
{

.header
{
height:100px;
width:1000px;
}
.header img
{
width:1000px;
}
}


HTML:

 <div class="header">
<img src="/common/media/images/some-image.jpg" />
</div>

спросил(а) 2021-01-25T15:40:41+03:00 4 месяца, 4 недели назад
1
Решение
99

Просто используйте css max-width чтобы установить максимальный размер изображения. Тогда он не может быть больше размера оригинала.

Поэтому удалите медиа-запрос и просто используйте это:

.header {
height:100px;
width:100%;
}

.header img {
width:100%;
max-width: 1000px;
}

ответил(а) 2021-01-25T15:40:41+03:00 4 месяца, 4 недели назад
45

Заменить 100%

.header img { max-width: 1000px; }

ответил(а) 2021-01-25T15:40:41+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема