Як автоматично змінювати розмір зображення за розміром браузера, але зберігати однакову висоту?

Я намагаюся повторити той самий ефект, який має цей веб-сайт: http://www.knockknockfactory.com/

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

Коли я намагаюся повторити це, моє зображення також зменшується, але змінюється висота?

Наразі мій код:

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

CSS:

body {
    margin: 0;
    padding: 0;
}

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

Як я можу отримати моє зображення для зменшення/збільшення після зміни розміру браузера, але як і раніше зберігати однакову висоту за допомогою CSS, як на цьому сайті?

9
просто використовуйте ширину : 100%; висота повинна бути також фіксованою висотою, в пікселях (наприклад, висота: 100px; )
додано Автор musefan, джерело
Це не схоже на те, що зображення на сайті, з яким ви пов'язані, насправді змінює розмір зображення, він просто відключає його. У цьому випадку ви просто хочете використовувати фонове зображення, як вони є.
додано Автор Patrick, джерело

7 Відповіді

Я використав ідеальне повне фонове зображення сторінки попереднього сайту.

Ви можете використовувати background-size: cover; , якщо вам потрібно лише підтримувати сучасні браузери.

4
додано
Дякую! Це точно хочу, щоб я хотів, замість використання навантажень медіа-запитів я тільки використовувати кілька, коли ширина дуже мала
додано Автор Ned, джерело

Це старе питання, але я хочу додати, що якщо ви хочете змінити розмір зображення відповідно до розміру вікна лише з css; можна використовувати одиниці перегляду "vh (висоту вікна перегляду) або vw (ширину вікна перегляду)".

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

Перегляньте веб-переглядач

2
додано

Since you are having trouble adjusting the height you might be able to use this. http://jsfiddle.net/uf9bx/1/

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

Я не впевнений, який розмір або розташування ви розміщуєте, але, можливо, це допоможе!

2
додано
Радий, що міг допомогти, удачі з сайту Ned!
додано Автор Matt, джерело
Спасибі це також створює що я захотів
додано Автор Ned, джерело

Make it a background image and larger than 100% to get the desired effect: 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
додано
Спасибі вам це працює
додано Автор Ned, джерело

Веб-сайт, з яким ви зв'язалися, не змінює ширину зображення, але фактично відключає його. Для цього його потрібно встановити як фонове зображення.

For more info about background-image look it at 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
додано

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

скільки зображень ви хочете мати цю функцію? Якщо це багато, і всі вони мають РІЗНІ висоти, ви, мабуть, просто дозволяєте змінити висоту.

Дозволяє сказати, що у вас є 5 зображень, які мають висоту 400px, у вашому html дають ці п'ять тегів класу фіксованих

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

Це має дозволити змінити ширину, але зберегти висоту.

0
додано

Ви повинні дізнатися про запити медіа для CSS. Сайт, на який ви звертаєтесь, використовує той самий. Сайт використовує в основному різні CSS кожен раз, коли розмір вікна браузера змінюється. Ось посилання на зразки

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

0
додано