Уменьшение размера CSS при изменении размера браузера

Я использовал фоновое изображение на веб-странице и использовал этот код в css, который делает его красивым по размеру при изменении размера браузера.Уменьшение размера CSS при изменении размера браузера

body{ 
    background: url("images/back.jpg") no-repeat ; 
    background-size: cover; 
}

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

увидеть вазы в этих двух изображениях

browser in full size

resized browser

как я могу сделать вазу изображение также получить изменен так же, как фон

источник

2012-11-05 JanetOhara

Что CSS вы используете для вашего изображения? –

Как насчет объединения двух изображений в одно изображение? –

У Билли есть указатель мыши, который меняет цвет вазы, поэтому он должен быть другим изображением. – JanetOhara

Попробуйте сделать относительное положение изображения и установив выравнивание вручную.

http://jsfiddle.net/cfjbF/1/

<head> 
    <style> 
     body { 
      background: #000000; 
     } 

     #image1 { 
      background: #008000; 
      position: relative; 
      left: 50px; 
      height: 50px; 
      width: 50px; 
     } 
    </style> 
</head> 
<body> 
<div id="image1"></div> 
</body>

источник

2012-11-05 14:26:41 zmanc

решение для вашей проблемы:

https://stackoverflow.com/a/7660978/1256403

ИЛИ

http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/

источник

2012-11-12 04:30:43

Я недавно столкнулся с точно такой же вопрос создания скрытых OBJ ect, которая нуждалась в изображениях, размещенных поверх фонового изображения, чтобы сохранить свою позицию независимо от размеров браузера.

Вот что я сделал:

Вы можете включать в себя версию шаблона фонового изображения в качестве фактического <img> с visibility:hidden (так что это не видно, но по-прежнему занимает это пространство в DOM и базового размера (и размер фонового изображения) на его основе

HTML:.

<div class="image-container"> 
    <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="img-template"> 
    <div class="item"></div> 
</div>

CSS:

/* This is your container with the background image */ 
.image-container { 
    background:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png') no-repeat; 
    background-size:100%; 
    overflow-x: hidden; 
    position:relative; 
} 

/* This is the template that resizes the DIV based on background image size */ 
img.img-template { 
    visibility: hidden; 
    width:100%; 
    height:auto; 
} 

/* This is the item you want to place (plant pot) */ 
.item { 
    position: absolute; 
    left: 14.6%; 
    bottom: 80.3%; 
    width: 15%; 
    height: 15%; 
    background: yellow; 
    border: 2px solid black; 
}

Вот рабочий пример: http://jsfiddle.net/cfjbF/3/

источник

2016-12-09 21:50:41

Уменьшение размера CSS при изменении размера браузера

ответ

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