Автоматически изменять размер изображений с размером браузера с помощью CSS

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

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</html>

CSS

body {
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
    background-size: cover;
}

#icons {
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: 400px;
    height: 80px;
    z-index: 8;
    transform: rotate(-57deg); 
    -ms-transform: rotate(-57deg); 
    -webkit-transform: rotate(-57deg); 
    -moz-transform: rotate(-57deg);
}

#contact { 
    float: left; 
    cursor: pointer; 
}


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

Как я могу в основном иметь полноэкранный дизайн (с background-size: cover) и иметь элементы div в точно такой же позиции (% wise) при изменении размера окна браузера с их размером и изменением размера (например, cover для фона)?

Ответы

Ответ 1

Чтобы сделать изображения гибкими, просто добавьте max-width:100% и height:auto. Изображение max-width:100% и height:auto работает в IE7, но не в IE8 (да, еще одна странная ошибка IE). Чтобы исправить это, вам нужно добавьте width:auto\9 для IE8.

Источник: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

например:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

а затем любые изображения, которые вы добавляете просто с помощью тега img, будут гибкими

Пример JSFiddle здесь Нет необходимости в JavaScript. Работает в последних версиях Chrome, Firefox и IE (это все, что я тестировал).

Ответ 2

контейнер изображений

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

В контейнере #icons используются значения px для ширины и высоты. Значения px не масштабируются при изменении размера браузера.

Решения

Используйте один из следующих способов:

  • Определите ширину и/или высоту с помощью значений %.
  • Используйте серию запросов @media для установки ширины и высоты для разных значений в зависимости от текущего размера экрана.

Ответ 3

Это может быть слишком упрощенным ответом (я все еще новичок здесь), но то, что я делал в прошлом, чтобы исправить эту ситуацию, - это процентная доля экрана, на которую я хотел бы обратить внимание. Например, есть одна веб-страница, над которой я работаю, где логотип должен занимать 30% от размера экрана, чтобы выглядеть лучше. Я играл и, наконец, пробовал этот код, и он работал у меня до сих пор:

img {
width:30%;
height:auto;
}

При этом все ваши изображения будут изменяться на 30% от размера экрана. Чтобы обойти эту проблему, просто сделайте этот класс и примените его к изображению, на которое вы хотите быть на 30% напрямую. Вот пример кода, который я написал, чтобы выполнить это на вышеупомянутом сайте:

часть CSS:

.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}

часть HTML:

<img src="logo_001_002.png" class="logo">

В качестве альтернативы вы можете поместить любой образ, который, как вы надеетесь, автоматически измените размер в отдельный div и используйте параметр тега класса для каждого div (создавая теперь теги класса, когда это необходимо), но я чувствую, что это вызовет много дополнительных работа в конечном итоге. Но, если сайт требует этого: сайт требует его.

Надеюсь, это поможет. Отличный день!

Ответ 4

Следующее работает во всех браузерах для моих 200 цифр, для любого процента ширины - несмотря на то, что это незаконно. Юкка сказал: "Используйте это в любом случае". (Класс просто перемещает изображение влево или вправо и устанавливает поля.) Я не могу себе представить, почему это не стандартный подход!

<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />

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