Как сделать элементы изображения масштабируются окнами вместо репозиционирования

У меня есть проект, где у меня есть 4 изображений вместе в середине окна, выложенный как это:Как сделать элементы изображения масштабируются окнами вместо репозиционирования

12 
34

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

Прямо сейчас, я их всех в DIV под названием Центр:

<div style="max-width:1200px;" id="centerArrows">   
    <img src="images/homePage/arrowUL.png" style="position: relative; top: -100px; float:left;" /> 
    <img src="images/homePage/arrowUR.png" style="position: relative; left: 40px; top: -95px;" />  
    <img src="images/homePage/arrowDL.png" style="position: relative; left: -35px; top: -80px;" /> 
    <img src="images/homePage/arrowDR.png" style="position: relative; left: 670px; top: -510px;" /> 
</div>

с этим CSS:

#centerArrows { 
    margin-top: auto; 
    margin-left: auto; 
    margin-right: auto;  
    margin-bottom: auto; 
    position: relative; 
    z-index: 0; 
    width: auto;   
} 
img { 
    width: auto; 
    max-width: 100%; 
    max-height: 100%; 
}

Любая идея, что я делаю неправильно?

источник

2014-01-07 Ryan

Смотрите эту скрипку:

http://jsfiddle.net/LDt8P/

html , body , #centerArrows{ 
    display:table; 
    width:100%; 
    height:100%; 
} 
#centerArrows{ 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
}

скрипку в ответ на комментарий, чтобы ограничить изображение от разводя до 4-х строк:

http://jsfiddle.net/LDt8P/1/

Решение с JQuery, чтобы сделать изображение меньше, чтобы соответствовать ширине окна, когда ширина окна меньше, что конкретная ширина:

http://jsfiddle.net/LDt8P/3/

источник

2014-01-07 08:42:44 Zword

Это решает проблема с тем, чтобы изображение оставалось центрированным, но когда окно становится меньше, чем изображения, я бы хотел, чтобы изображения сохраняли свое положение и уменьшались, вместо того, чтобы перемещаться по ew. – Ryan

ok, я увижу, что.Пожалуйста, измените позже. – Zword

Это не перемещение в новую строку. И что вы имеете в виду, уменьшая масштаб? Это должно быть меньше изображений – Zword

var initialWidth = $(window).width(); 
$(window).resize(function(){ 
    $('img').each(function(){ 
     var img   = $(this), 
      pos   = img.data('pos') || $(this).offset(), 
      imgWidth = img.data('width') || img.width(), 
      ratio  = $(window).width()/initialWidth, 
      newImgWidth = imgWidth * ratio, 
      newImgLeft = pos * ratio; 
     img.css({ 
       width: newImgWidth + 'px', 
       left: newImgLeft + 'px' 
      }); 
    }); 
}).resize();

Вот простая реализация jQuery. В этом случае вы должны использовать позицию: фиксированную или позицию: абсолютную (в этом случае элементы относительного родителя должны быть телом.

Код непроверен ... (извините, у меня действительно нет времени сейчас)

источник

2014-01-07 08:42:38 wintercounter

Как сделать элементы изображения масштабируются окнами вместо репозиционирования

ответ

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