Ширина img 100% на дисплее: box (родительский css flexbox) - PullRequest
Новая
       30

Ширина img 100% на дисплее: box (родительский css flexbox)

2 голосов
/ 26 марта 2011

Я пытаюсь изменить размер изображения, чтобы оно стало шириной родительского элемента div;обычно width: 100%; работает нормально, но когда у родителя есть display: box;, размер img не изменяется.Предоставление ребенку изображения box-flex: 1 не имеет никакого эффекта. 

<div style="display: -webkit-box; -webkit-box-pack: center; width: 100%;">
  <img src="foo.jpg" style="-webkit-box-flex: 1;" />
</div>

Ответы [ 3 ]

2 голосов
/ 16 мая 2011

Может быть, вы решили это, но вы можете использовать (Предоставление примера для Mozilla) 

IMAGE {
  display: -moz-box;
  -moz-box-flex: 1;
}
#cont {
  -moz-box-orient: horizontal;
  display: -moz-box;
}

Не тестировали пример, и в худшем случае вам нужно сделать твик, но я довольноуверен, что это правильно.

2 голосов
/ 20 февраля 2013

Конечно, это старый вопрос, однако он все еще обнаруживается в поиске, поэтому хотел обновить ответ:

В настоящее время в Chrome 23 и Firefox Nightly 21.0a1 этот макет работает, чтобы сохранить размер изображения родительского элемента div и изменить его размер (вместе с сохранением его в центре).

http://jsfiddle.net/qAErr/

HTML 

<section id="holdMe">
  <div>
     <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html5"/>
  </div>
</section>

CSS 

#holdMe {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
    }
    #holdMe img {
      width: 100%;
    }
1 голос
/ 27 марта 2011

Браузер?

Мне не известен ни один браузер, который поддерживает спецификации flexbox без префиксов поставщиков.

display: -moz-box; и display: -webkit-box; и т. Д.

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

Вы также должны определить ширину родительского элементаотд.

...