Как масштабировать изображения в блоке flex?

Question

[maiskiykot]

Странный глюк поймал. Разбил страницу на два столбца при помощи flex. Один из столбцов содержит изображения. При уменьшении экрана браузера изображения не масштабируются а вылазят за границу блока. Как исправить?

Comments

[Rustam Bainazarov]

img { max-width: 100%; }

Если не работает, присылайте код.

[maiskiykot]

SmthTo, какой код?

<div style="display:flex"><div></div><div><img></div>

[Rustam Bainazarov]

maiskiykot, полный код HTML и CSS в песочнице.

Зачем мне ваш HTML в таком виде?

[Сергей Горячев]

SmthTo, к тому же с ошибкой, незакрытый тег)

[maiskiykot]

В моем коде еще десяток дивов, но img ведут себя везде одинаково - вылазят за границы

[Rustam Bainazarov]

maiskiykot, и что? Просто выложите кусок кода. Мы говорим о коде, когда не видим кода.

Проблема может быть и выше по коду, к примеру, из-за оси flex-контейнера и flex-wrap.

[maiskiykot]

SmthTo, Зачем усложнять? Остальная разметка собрана без флекс. Долго не мог заставить уменьшаться два столбца вместе с браузером. Добавил флекс - столбцы стали нормально себя вести, а изображения перестали масштабироваться.

[Rustam Bainazarov]

maiskiykot, ну что вам сказать.

Если усложнение для вас это не вот это вербальное гадание (почему не работает max-width у изображений), а реальный пример кода, чтобы можно было разобраться быстро и эффективно — то я вас понял.

[Сергей Горячев]

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

[Rustam Bainazarov]

Сергей Горячев, я не перестаю удивляться таким вопросам и нежеланию привести людьми нормальный пример кода.

Я так тут месяц назад сражался за кусок кода два дня, чтобы решить проблему человека за 2 минуты. А он тоже расписывал, описывал что-то неведомое на 20+ комментариев.

Не понимаю я этого.

[maiskiykot]

<div style="display:flex; flex-direction: row;">
<div class="anonce">
<div class="navy">
<div><a href="javascript:openPopup('{$local}zakazq.php',600,620);" title="Отправить сокращенный заказ">&nbsp;Быстрый заказ</a></div>
  <div><a href="{$local}zakaz.php" title="Отправить полный заказ">&nbsp;Подробный заказ</a></div>
  <div><a href="javascript:openPopup('{$local}mailform.php',550,480);" title="Отправить письмо">&nbsp;Написать письмо</a></div>
 </div>
 <div>
 <form name="search" method="post" action="../search.php" target="blank" role="search">
 <input id="search" type="text" placeholder="Поиск по сайту" name="query">&nbsp;<input id="submit" type="submit" value=" ">
 </form>
 </div>
<div class="new">
   <h2>Новая рубрика:</h2>
          <a href="../interes.php" title="Немного о переговорах по поставке техники">А что Вас интересует?</a>
          
                  <div class="offer">
                <h2>Предложение дня</h2>
                 {$offer}
                </div>
                    <div class="xmail">
                    <a href="{$mail}"><img src="{$local}images/email.png" alt="Написать нам"></a><br>
                    <strong>{$phone}</strong>
                   </div>
                  <hr>
                 </div>
          <div id="anonce" role="note">{$anonce}</div> 
</div>
<div class="index">
<div class="top">
<div class="nazlo"><div><h2>Наша рубрика - На злобу дня</h2>
        Сегодня:&nbsp;<strong>{$nazlobu[0]}</strong><br>
          <a href="{$nazlobu[1]}" target="_blank" title="Переход в рубрику ''На злобу дня''">Перейти</a>
             </div><div><a href="">x</a></div>
             </div>
             <div id="stars"><strong>Пожалуйста оцените новый дизайн сайта:</strong>
             <form method="post" id="vote"><input type="radio" name="stars" value="1" onclick="document.forms.vote.submit();"> ->1 <input type="radio" name="stars" onclick="document.forms.vote.submit();" value="2"> ->2 <input type="radio" name="stars" onclick="document.forms.vote.submit();" value="3"> ->3 <input type="radio" name="stars" onclick="document.forms.vote.submit();" value="4"> ->4 <input type="radio" name="stars" onclick="document.forms.vote.submit();" value="5"> ->5 </form></div>
   </div>
        <script type="text/javascript" src="../js/menu.js"> </script>
 <nav role="navigation">
          {include 'menu.tpl'}
   </nav>
 <div class="content" role="main">
         {$content}
          {$ssylki} 
          {$podval}

 </div>         

</div>
    {$script1}
</div>

[maiskiykot]

В этом коде добавлен единственный контейнер flex. До этого все прекрасно работало.
Проблемы в контейнере content

[Rustam Bainazarov]

maiskiykot, я, конечно, всё понимаю, но зачем только разметка, когда дело в CSS(?!)

https://jsfiddle.net/89eb546m/

Сделал за вас простое действие. Добавьте сюда ваш CSS.

[Rustam Bainazarov]

SmthTo, а лучше вообще код не из шаблона с переменными, а скопируйте уже HTML-вывод из браузера. Но хотя бы вставьте CSS для начала.

[maiskiykot]

.anonce {width: 16%;  border-right: 3px solid  rgba(187, 187, 187,0.25); background: url('../images/bgr.jpg') no-repeat; color: #F0F0F0;  box-shadow: 0 14px 28px rgba(174, 174, 174,0.25), 0 10px 10px rgba(176, 176, 176,0.25), inset -20px 0 26px -20px rgba(244, 244, 244,0.7);}

.index {background: #FFFFFF; min-width: 84%; max-width: 100%; }

.content {margin-top: -40px; padding: 10px;}

[maiskiykot]

Сколько криминала в css! Аж тонны непонятного кода.

[Rustam Bainazarov]

maiskiykot, мужик, ты стебёшься? Я уже даже ссылку на песочницу тебе прислал. Тебе нужно только, блин, в эту колонку код свой подставить, нажать сверху SAVE и прислать ссылку.

https://jsfiddle.net/89eb546m/

[Rustam Bainazarov]

Или пришли ссылку на сайт, если код прислать такая проблема.

[maiskiykot]

Сайт на локали пока. Напряжно отклячивать fenom, страницу, css, js и картинки

[Rustam Bainazarov]

maiskiykot, «напряжно» вставить содержимое файла CSS в поле на сайте по ссылке? «Напряжно» скопировать HTML-код с помощью инструментов разработчика Chrome комбинацией CTRL+C? Боюсь в таком случае представить уровень разработки.

Ну тогда ладно, что же, извините за беспокойство.

[maiskiykot]

Я вообще версткой не занимаюсь. Это мой личный проект, который переделываю еще с css1. Не понимаю: что вы хотите увидеть в коде, если я практически весь код выложил и css тоже.

[Rustam Bainazarov]

maiskiykot, весь CSS-код? Из сообщения? Т. е. у вас правила всего для трёх селекторов?

https://jsfiddle.net/h76g4mtx/

[maiskiykot]

Так там все вложенные контейнеры и картинки. Два шаблона content и podval вкладываются и в обоих проблемы с изображениями. В контейнере anonce кстати все нормально. Я уже все дополнительные правила из css повыкидывал. Однако все равно фотки вываливаются из верстки при уменьшении размера окна.

[maiskiykot]

Важное дополнение! Глюк только в IE 11 и в Edge но в нем браузер упирается в размер самой большой фотки предварительно ее немного уменьшив

[Rustam Bainazarov]

maiskiykot, блин, ну это пипец. Я понял, что у тебя шаблон, который что-то там делает. Только как я должен это понять? Скопируй код из браузера, когда он выдаст тебе результат. Мне твой backend-шаблон нафиг не нужен.

[maiskiykot]

<body onload="">
<div style="display:flex; flex-direction: row;">
<div class="anonce">
<div class="navy">
<div><a href="javascript:openPopup('http://localhost/site/zakazq.php',600,620);" title="Отправить сокращенный заказ">&nbsp;Быстрый заказ</a></div>
  <div><a href="http://localhost/site/zakaz.php" title="Отправить полный заказ">&nbsp;Подробный заказ</a></div>
  <div><a href="javascript:openPopup('http://localhost/site/mailform.php',550,480);" title="Отправить письмо">&nbsp;Написать письмо</a></div>
 </div>
 <div>
 <form name="search" method="post" action="../search.php" target="blank" role="search">
 <input id="search" type="text" placeholder="Поиск по сайту" name="query">&nbsp;<input id="submit" type="submit" value=" ">
 </form>
 </div>
<div class="new">
   <h2>Новая рубрика:</h2>
          <a href="../interes.php" title="Немного о переговорах по поставке техники">А что Вас интересует?</a>
          
                  <div class="offer">
                <h2>Предложение дня</h2>
                 <div><a href="javascript:openPopup('../offerday.php?s=x',610,680);" class="link"><img style="max-width: 100%;" src="../images/thmb.php?gd=2&src=offerday/caterpillar_352f_2016_1.jpg&maxw=170" alt="Caterpillar 352F 2016  4900  ROPS, кондиционер, камера заднего вида, быстросменное подлючение OQ90, траки 90%, ковш 90% 279000 Euro EXW EU
">
          <div class="invert">Только из первых рук!!!</div>
          Caterpillar 352F-2016</a></div>                </div>
                    <div class="xmail">
                    <a href="[e-mail]"><img src="http://localhost/site/images/email.png" alt="Написать нам"></a><br>
                                     </div>
                  <hr>
                 </div>
          <div id="anonce" role="note"> <h2></h2>
				   </div> 
</div>
<div class="index">
<div class="top">
<div class="nazlo"><div><h2></h2>
                   </div><div><a href="">x</a></div>
             </div>
             <div id="stars"><strong>Пожалуйста оцените новый дизайн сайта:</strong>
             <form method="post" id="vote"><input type="radio" name="stars" value="1" onclick="document.forms.vote.submit();"> ->1 <input type="radio" name="stars" onclick="document.forms.vote.submit();" value="2"> ->2 <input type="radio" name="stars" onclick="document.forms.vote.submit();" value="3"> ->3 <input type="radio" name="stars" onclick="document.forms.vote.submit();" value="4"> ->4 <input type="radio" name="stars" onclick="document.forms.vote.submit();" value="5"> ->5 </form></div>
   </div>
        <script type="text/javascript" src="../js/menu.js"> </script>
 <nav role="navigation">
          
 	<div  id="ddtopmenubar" class="mattblackmenu">
 		 		<ul>  
                <li>            	                	    </li>
            	            	</ul>          
       </div>
   </nav>
 <div class="content" role="main">     
	<div class="left">
	 <img src="../images/man-head.jpg" alt="Грузовики">
     </div>
    <div style="text-align: center;"><h2></h2>
       </div>

 	<div class="space"><hr></div>
             <div class="article">

               <img
            alt=""  src="../images/man-logo.gif" width="100" ><br>
                      <h1></h1>

                	 			</div>
	 			<div class="space"><hr></div>
                 </div>          <div class="ssylki">
		  <h2>Ссылки по теме:</h2>
		    <ul>
		      <li></li>
     		      </ul>
       </div>
        
          <div class="wrap">
     <h3 align="center">НАШ ПОДВАЛ</h3>
    <hr width="60%" />
     <hr />

     <div style="float: left; padding: 5px"><img src="../images/ginaf.jpg" width="221" alt="Iveco Wind chassis"></div>
           <div class="clear"></div>
</div>

 </div>         

</div>
    </div>
      <footer>
    </footer>
</body>

[Rustam Bainazarov]

maiskiykot, да, уже что-то.

Когда пишешь ответ, нажимай на кнопку «ответить», иначе я не вижу твоего сообщения. Я обновляю эту страницу на чистом энтузиазме.

Теперь пришли полный CSS-код из файла со всеми правилами и т. п.

[maiskiykot]

.anonce {width: 16%;  border-right: 3px solid  rgba(187, 187, 187,0.25); background: url('../images/bgr.jpg') no-repeat; color: #F0F0F0;  box-shadow: 0 14px 28px rgba(174, 174, 174,0.25), 0 10px 10px rgba(176, 176, 176,0.25), inset -20px 0 26px -20px rgba(244, 244, 244,0.7);}
.anonce a {color:#7494BA}
.anonce a:hover {color:#FFFFFF}
.anonce h2 {font-size: 14px; color: #E0E0E0}
.anonce strong {color:#ffffff;}
#search {margin-left: 5px; width: 75%; font-size: 14px;}
#submit {background: url('../images/search-min.png'); border-radius: 3px;}
.new {text-align: center;}
#anonce {font-family:Quicksand; font-weight:bold; font-size:14px; font-style:italic; padding: 6px; background: rgba(46, 46, 46,0.5);}
.navy div {height: 12px; margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #969696;}
.navy div:hover{background: #585858;}
.navy a {margin-left: 30px; font-size: 12px; color: #FFFFFF;}
.nazlo {background: rgba(227, 227, 227,0.8); line-height: 15px; width: 350px; max-width: 100%; height:65px; position: absolute; z-index: 100;}
.nazlo div {float: left; text-align: center; padding: 5px; margin: 0 auto; border-right: 1px solid #ACACAC; max-width: 90%; white-space: nowrap;}
.nazlo a {color: #002B55; font-size: 16px; font-weight: bold}
.nazlo a:hover {color: #800000}
#stars {position: relative; display: block; background: rgba(227, 227, 227,0.9); width: 350px; max-width: 100%; float: right; text-align: center; top: 10px;}
.top{padding: 0; margin: 1; background:url(../images/header1.jpg); max-widrh: 100%; border-left:#D4D4D4 1px solid; border-right:#D4D4D4 1px solid;}
.index {background: #FFFFFF; min-width: 84%; max-width: 100%; }
img {width: auto; max-width: 100%; height: auto;}
nav {position:relative; top: -25px; z-index:100; left: -2px; text-align:center; background:url(../images/header1.jpg) 0 bottom repeat-x; box-shadow: 5px 0 5px -5px #000 inset, -5px 0 5px -5px #F4F4F4 inset;}
nav a { float:left; font-size:14px; margin-top: 5px; margin-left: 30px; cursor:pointer; font-weight: bold; color:#F5F5F5; text-align: center;}
.article {margin-left: 10px; text-align: center;}
.article h1 {text-align: center;}
.article p{width: 98%; text-align: justify; font-size: 14px;}
.article ul{margin-left:0; text-align: left;}
.article p:first-letter { font: Times, serif; font-weight: bold; font-size: 120%; color: #660000;}
.article table tr td {padding: 0; margin: 0;}
.article img {vertical-align: bottom; line-height: 0;}
.top {max-width:100%; background:url(../images/shapka.jpg) repeat-x; margin-left: -2px; height: 90px; padding: 0;}
.content {margin-top: -40px; padding: 10px;}
.invert {background: #002142; color: #F0F0F0; font-size: 11px; font-weight: bold; line-height: 25px;}
.offer {background: rgba(66, 66, 66,0.5); width: 90%; border-top: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; padding: 5px;  text-align: center; margin: 5px;}
.center {text-align: center; margin-left: auto; margin-right: auto;}
.left {float:left; padding: 5px;}
.right {float: right;}
.space {clear: left; height: 2px; }
.ssylki {min-width: 300px; width: 450px; max-width: 100%; padding: 15px 10px 15px 15px; margin-left:auto; margin-right:auto;}
.ssylki a {font-size: 14px;}

Answer 1

[maiskiykot]

Сам нашел проблему. Мешает float внутри любых элементов flex

Answer 2

[Евгений Акулинин]

Добавить столбцам
position: relative;
а изображениям
max-width: 100%;

Comments

[maiskiykot]

мах-width первым делом поставил. А чем position: relative поможет? Контейнер flex

[Сергей Горячев]

maiskiykot, jsfiddle.net - ванги там

[maiskiykot]

Сергей Горячев, Учту

[Евгений Акулинин]

maiskiykot, а по какому контейнеру img будет знать что для него является 100% шириной? Не вся страница же. Вот колонке и задается position: relative чтобы показать чтобы показать от ее ширины надо отталкиваться

[Rustam Bainazarov]

Евгений Акулинин, relative и width так не работают :)))

Только в случае, если img был бы на position: absolute относительно родительского контейнера.

[Rustam Bainazarov]

Евгений Акулинин, собственно, смотрите сами:
https://jsfiddle.net/bjgkqzh5/

Answer 3

[skuvaWeb]

object-fit: ?