it-swarm.com.ru

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

Я пытаюсь повторить тот же эффект, который имеет этот сайт: 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, как на этом веб-сайте? 

9
Ned

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

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

4
Jeremy Gallant

Это старый вопрос, но я хочу добавить, что если вы хотите изменить размер изображения в соответствии с размером области просмотра только с помощью CSS; Вы можете использовать единицы просмотра "vh (высота области просмотра) или vw (ширина области просмотра)".

.img {
width: 100vw;
height: 100vh;
}

Смотрите браузер поддерживает

2
eren130

Так как у вас возникают проблемы с регулировкой высоты, вы можете использовать это . http://jsfiddle.net/uf9bx/1/

img{
width: 100%;
height: 100%;
max-height: 300px;
}

Я не уверен точно, какого размера или места вы помещаете свои изображения, но, возможно, это поможет!

2
Matt

Сделайте фоновое изображение размером более 100%, чтобы получить желаемый эффект: http://jsfiddle.net/derekstory/hVM9v/

HTML

<div id="image"></div>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#image {
    width: 100%;
    height: 500px;
    background: #000 url('http://static.ddmcdn.com/gif/dog-9.jpg') center no-repeat;
    background-size: auto 200%;
}
1
Derek Story

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

Для получения дополнительной информации о 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
Mohammad Areeb Siddiqui

изменение ширины изображения автоматически изменит высоту ...

сколько картинок вы хотите иметь эту функциональность? Если это много, и все они имеют РАЗЛИЧНУЮ высоту, вам, вероятно, следует просто изменить высоту.

Допустим, у вас есть 5 изображений, которые имеют высоту 400 пикселей, в вашем html присвойте этим пяти тегам класс фиксированного

.fixed { width: 100%; height: 500px !important }

Это должно позволить ширине измениться, но оставить высоту неизменной.

0
bob

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

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

0
vendettamit