Как изменить размер изображения автоматически при изменении ширины браузера, но сохранить ту же высоту?

Я пытаюсь воспроизвести тот же эффект, что и на этом сайте: http://www.knockknockfactory.com/.

При изменении ширины браузера изображение автоматически уменьшается, но высота области, которую оно занимает, остается неизменной.

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

На данный момент мой код выглядит следующим образом:

 <div id="image"><img src="cover.png" /></div>

CSS:

body {
    margin: 0;
    padding: 0;
}

img { 
    max-width: 100%; 
    height: auto; 
}

Как сделать так, чтобы изображение уменьшалось/увеличивалось при изменении размера браузера, но сохраняло ту же высоту с помощью CSS, как на этом сайте?

George Kagan
Редактировал вопрос 5-го ноября 2016 в 7:00
Программирование
image html css resize
26-го июня 2013 в 3:56
22 просмотров
Решение

Я'использовал Perfect Full Page Background Image для достижения этой цели на предыдущем сайте.

Вы можете использовать background-size: cover;, если вам нужна поддержка только современных браузеров.

Комментарии (1)

Вам следует узнать о медиа-запросах для CSS. Сайт, на который вы ссылаетесь, использует то же самое. Сайт использует разные CSS каждый раз, когда размер окна браузера меняется. Вот ссылка на примеры

http://css-tricks.com/css-media-queries/

Комментарии (0)

Сайт, на который вы ссылались, не изменяет ширину изображения, а фактически обрезает его. Для этого его нужно установить как background-image.

Более подробную информацию о background-image смотрите на http://www.w3schools.com/cssref/pr_background-image.asp.

Использование:

#divID {
    background-image:url(image_url);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
Комментарии (0)