Как создать максимальную высоту изображения flexbox?

CSS Flexbox новичок здесь.Как создать максимальную высоту изображения flexbox?

Я пытаюсь добиться раскладку с

Фиксированная высота заголовка
Содержание области, которая занимает все доступное пространство, и отображает изображение.
Фиксированная высота колонтитула

enter image description here

Я получил это работает со следующим кодом Flexbox:

<html style="height: 100%;"> 
 
    <body style="height: 100%;"> 
 
    
 
     <div style="display: flex; flex-direction: column; height: 100%;"> 
 
      <div style="background-color: rgba(255, 0, 0, .1)";> 
 
       Header 
 
      </div> 
 
    
 
      <div style="flex: 1; background-color: gray;">   
 
       content 
 
      </div> 
 
    
 
      <div style="background-color: rgba(0, 0, 255, .1)"> 
 
       Footer 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

Это прекрасно работает. Теперь я хочу отобразить изображение внутри области содержимого. С небольшими изображениями, это работает отлично:

<!-- Inside the content div... --> 
<img src="..." />

enter image description here

Однако, с большими изображениями, изображение переливается его контейнер :-(

enter image description here

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

Я пробовал установить max-height: 100% на img, но он все еще переполняет контейнер. Как я могу это исправить?

источник

2015-04-09 Judah Himango

После публикации этого вопроса я понял, что смогу сделать эту работу, избавившись от элемента и вместо этого установив фоновое изображение на контент div, background-size: contains, background-repeat: no-repeat.Тем не менее, мне любопытно, как содержать внутри flexbox. Изображения –

<html style="height: 100%;"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="mystyle.css"> 
    </head> 
    <body style="height: 100%;"> 

     <div style="display: flex; flex-direction: column; height: 100%;"> 
      <div style="background-color: rgba(255, 0, 0, .1)";> 
       Header 
      </div> 

      <div style="flex: 1; background-color: gray;">   
       content 
       <img src="dog.svg" id="imge" /> 
      </div> 

      <div style="background-color: rgba(0, 0, 255, .1)"> 
       Footer 
      </div> 
     </div> 
    </body> 
</html> 

#imge{ 
     position:absolute; 
     width: 99%; 
     margin-left: -3%; 
     height: 96%; 
}

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

источник

2015-04-09 21:06:01 Shelly

.jpg и .png не могут сохранять качество изображений при растяжении или сжатии, если вы используете изображения svg, это поможет вам. – Shelly

Я не хочу растягивать изображение. Я хочу сжать содержимое изображения; т. е. сжимать его при необходимости, сохраняя соотношение сторон. –

Я тоже новичок в flexbox, поэтому я не знаю, как/или если flexbox может это достичь.

Но CSS фоновое изображение может легко это сделать ... (Нет IE> = 8 Support) http://caniuse.com/#feat=background-img-opts

Я просто добавил DIV в области содержимого. Установите его в абсолютное положение, сверху, справа, снизу и слева 0. (не забудьте установить его родителя относительное положение.)

Затем установите его:

background-size: contain; 
background-repeat: no-repeat; 
background-position:center;

http://codepen.io/xenocide/pen/xGwaBm/

источник

2015-05-06 21:33:58 matt

Да, если вы посмотрите в комментарии к исходному вопросу, я сделал то же открытие. Тем не менее, мне все равно хотелось бы знать, как это сделать с элементом изображения, а не с стилем фонового изображения CSS. –

Как создать максимальную высоту изображения flexbox?

ответ

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