Отзывчивое центрированное изображение: вертикальное изменение размера - НЕ

Мне показалось, что я разобрался, как это сделать, но, я думаю, я до сих пор не справился. Я пытаюсь достичь этого с минимумом css.Отзывчивое центрированное изображение: вертикальное изменение размера - НЕ

Изображение центрировано, и если вы изменяете размер окна по горизонтали или по диагонали (с акцентом на горизонтальное), все будет хорошо.

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

Я пробовал различные комбинации max-height, max-width, height и width, но никто, кажется, не решил его.

Мои изображения будут разных размеров между шириной max 1024px и высотами max 768px;

Мои усилия можно увидеть на

http://mclportal.net/AtLast/DeadCentre.html

 #lightbox{ 
 
      background: lightblue; 
 
      padding: 0px; 
 
      position: absolute; 
 
      left: 0; 
 
      top: 0; 
 
      height: 100%; 
 
      width: 100%; 
 
     } 
 
     
 
     #slide{ 
 
      background: #ffdb4c; 
 
      /* height: 300px; */ 
 
      position: relative; 
 
      top: 50%; 
 
      
 
      -webkit-transform: translateY(-50%); 
 
      -moz-transform: translateY(-50%); 
 
      -ms-transform:  translateY(-50%); 
 
      -o-transform:  translateY(-50%); 
 
      transform:   translateY(-50%); 
 
     } 
 
       
 
     img { 
 
      max-width: 800px; 
 
      max-height: 600px; 
 

 
      display: block; 
 
      margin: auto; 
 
     } 
 

 
Markup:

 
 
    <body> 
 
    <div id="lightbox"> 
 
     <div id="slide"> <img src="http://lorempixel.com/800/600/" id="myImg"/> 
 
     </div> 
 
    </div>

Я тестирование с MAC Mountain Lion и последним Firefox и Chrome

Просто испытанного с SAFARI и он не реагирует ни в одном направлении!

источник

2014-11-23 mcl

'# slide' нуждается' высота: 100% и '' img' нуждается Макс-высота: 100% ' – esswilly

Теперь изменение размера работает только по вертикали не по горизонтали и вертикали центр ушел. – mcl

Сложная часть с этими сценариями заключается в том, что ваша максимальная ширина и высота должны быть динамическими, в том смысле, что они могут легко адаптироваться к различным ориентациям видового экрана. Если совместимость с кроссбраузером не является серьезной проблемой, вы можете использовать vmax и vmin единиц соответственно для измерения максимального размера изображения, чтобы заставить изображение подчиняться границам видового экрана, независимо от ориентации на видовом экране.

Этот трюк работает только если:

поддержка

Browser для видовых единиц доступны - вы, возможно, придется рассмотреть для тех, резервные объявления, которые не
Что #lightbox контейнер имеет размеры (как вертикальные, так и горизонтальные) относительно размера окна просмотра.

#lightbox{ 
 
    background: lightblue; 
 
    padding: 0px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#slide{ 
 
    background: #ffdb4c; 
 
    /* height: 300px; */ 
 
    position: relative; 
 
    top: 50%; 
 
    
 
    -webkit-transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform:  translateY(-50%); 
 
    -o-transform:  translateY(-50%); 
 
    transform:   translateY(-50%); 
 
} 
 

 
img { 
 
    max-width: 80vmax; 
 
    max-height: 80vmin; 
 
    display: block; 
 
    margin: auto; 
 
}

<div id="lightbox"> 
 
    <div id="slide"><img src="http://lorempixel.com/800/600/" id="myImg"/></div> 
 
</div>

источник

2014-11-23 20:49:33 Terry

Отзывчивое центрированное изображение: вертикальное изменение размера - НЕ

ответ

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