Картинка по ширине текста

173

13 декабря 2017, 21:24

Доброго времени суток, встала следующая задача:

Есть макет

<div class="sidebar">
    <div class="menu">
        текст
    </div>
    <div class="ads">
         <img/>
    </div>
</div>

необходимо средствами css (без js) сделать так, чтобы ширина блока "sidebar" подгонялась под ширину текста в "menu", и размер картинки в "ads" был равен всей ширине "sidebar", т.е. ширине текста

Answer 1

img{  
  max-width: 100%; 
  width: 100%; 
} 
.sidebar {  
    display: inline-table;  
    background: #c7c7c7; 
} 
.menu { 
    background: #f9f9f9; 
    padding: 5px; 
} 
.ads { 
   display: table-caption; 
}

<div class="sidebar"> 
    <div class="menu"> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
    </div> 
    <div class="ads"> 
         <img src="http://2017newyear.ru/wp-content/uploads/2016/09/novyj_god.png"/> 
    </div> 
</div>

Answer 2

Вам понадобится свойство min-content для обертки, width: 100% для изображения и white-space: nowrap для меню.

.sidebar { 
  border: 1px solid; 
  padding: 1px; 
  width: min-content; 
} 
 
.sidebar + .sidebar { 
  margin-top: 2em; 
} 
 
.menu { 
  border: 1px solid green; 
  margin-bottom: 1px; 
  white-space: nowrap; 
  padding: 2px 5px; 
} 
 
.ads { 
  border: 1px solid grey; 
} 
 
.ads img { 
  display: block; 
  width: 100%; 
}

<div class="sidebar"> 
  <div class="menu"> 
    короткий текст 
  </div> 
  <div class="ads"> 
    <img src="http://via.placeholder.com/350x150" /> 
  </div> 
</div> 
 
<div class="sidebar"> 
  <div class="menu"> 
    текст, который немного длиннее предыдущего, и больше, чем картинка в длину 
  </div> 
  <div class="ads"> 
    <img src="http://via.placeholder.com/350x150" /> 
  </div> 
</div>