Отзывчивое изображение в CSS

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

Это мой HTML:

<div class="r-img" style="background:url(./img/cloud.png); width:587px; height:330px;"> 
</div>

Это мой CSS:

.r-img img{ 
    top:30px; 
    right:5px; 
    overlow:hidden; 
    display: block; 
}

Я хочу, чтобы страница выглядеть следующим образом: http://imgur.com/NAsDsNy

При использовании более низкое разрешение или CTRL + Scroll Я вижу следующее: http://imgur.com/OHSAvrE

Я просто хочу, чтобы изображение оставалось фиксированным, когда кто-то использует ctrl + scroll или когда кто-то получает доступ к странице с более низким разрешением, чем мое. Мое разрешение - 1920 x 1080.

источник

2014-01-23 Botez Sebastian Adrian

насколько я знаю, это не представляется возможным. Масштабирование делает все больше, включая фоны. – Joeytje50

вы добавили изображение в качестве обратного изображения, поэтому вы не можете применять к нему какие-либо стили, если вы не используете фоновый размер и фоновое положение и т. Д. Если вы добавите его с помощью тега изображения, то ваш вышеуказанный css будет работать. Чтобы определить уровень масштабирования браузера, вам нужно что-то вроде [this] (http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers), тогда вы может изменить размер вашего изображения соответственно – Pete

Просто заметьте, возможно, вы просто добавили его на свой вопрос неправильно, но у вас есть «overlow» вместо «overflow» в вашем CSS. – DBS

Вы можете попробовать использовать background-size с некоторым процентным значением (например, background-size: 30%).

DEMO

Процентное значение здесь является ключевым: при использовании он устанавливает фоновый размер относительно фона области позиционирования. При увеличении окна браузера эта область изменяется соответствующим образом. Таким образом, визуальный эффект заключается в том, что размер изображения одинаковый независимо от уровня масштабирования.

источник

2014-01-23 14:40:13 vbo

Большое спасибо. Я действительно ценю твою помощь. Размер фона был трюком! Ура! –

Поместите изображение внутри контейнера, размеры которого определены, а затем разместите внутри изображения и увеличьте его размер до 100%.

img { position:absolute; max-width: 100%;}

Таким образом, размер изображения всегда будет меняться, но изменения будут соблюдать размеры и пропорции контейнера (родительского). Это называется Изменение размера изображения под номером RESPONSIVE DESIGN.

Чтобы назначить размеры в контейнер изображения, использовать жидкости сетки размеры, как:

.2_cols {width: 153px;}

или если хотите ширину 100%:

.12_cols {width: 920px;}

Другой метод состоит в использовании фона изображение:

body.cloud { 
     background: url(/img/ban_home.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     position: absolute; z-index: -1; 
     }

источник

2014-01-23 14:41:07 datelligence

-1

Отъезд http://www.w3schools.com/cssref/css3_pr_background-size.asp для определения фонового изображения. Масштабирование страницы сделает все больше, но люди на меньших экранах будут видеть изображение как тот же самый размер, что и вы, если вы не используете проценты по ширине и высоте.

Для проверки различных разрешений вместо увеличения и уменьшения масштаба просто измените окно браузера на разные ширины и высоты. У Firefox и IE11 теперь есть гибкие инструменты для изменения окна браузера на различные разрешения экранов, которые вы можете использовать для тестирования своих сайтов.

источник

2014-01-23 14:43:53 CheckeredMichael

Все смешнее с @media (в вашем CSS):

@media (max-width: 767px) { 
    // Your css (of the image) when you are on mobile 
} 
@media (min-width: 768px) and (max-width: 991px) { 
    // Your css (of the image) when you are on tablets 
} 
@media (min-width: 992px) and (max-width:1199px) { 
    // Your css (of the image) when you are on medium screen 
} 
@media (min-width: 1200px) { 
    // Your css (of the image) when you are on large screen 
}

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

Просто настроить размер, где вы хотите:

.r-img { 
    width:587px; 
    height:330px; 
    ... 
}

Good Luck

источник

2014-01-23 14:46:16 agastalver

Отзывчивое изображение в CSS

ответ

Смежные вопросы