Я пытаюсь воспроизвести тот же эффект, что и на этом сайте: 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, как на этом сайте?
Я'использовал Perfect Full Page Background Image для достижения этой цели на предыдущем сайте.
Вы можете использовать background-size: cover;, если вам нужна поддержка только современных браузеров.
Вам следует узнать о медиа-запросах для CSS. Сайт, на который вы ссылаетесь, использует то же самое. Сайт использует разные CSS каждый раз, когда размер окна браузера меняется. Вот ссылка на примеры
Сайт, на который вы ссылались, не изменяет ширину изображения, а фактически обрезает его. Для этого его нужно установить как 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;
}