Сделать ширину заголовка не шире чем картинка когда изначально их содержимое неизвестно

#html #css

Есть такая разметка:


     
Какой-то текст, может быть шире чем картинка ниже
     



Текст и картинки динамические.
Можно ли сделать так, чтобы ширина block'а определялась шириной картинки, и текст
из заголовка переносился, если он шире картинки, не прибегая к js и flex'у?
    

Ответы

Ответ 1

http://caniuse.com/#search=intrinsic-width



div {
  border: 1px solid red;
  margin: 1em;
  width: -moz-min-content;
  width: min-content;
  word-break: break-word;
  word-wrap: break-word;
}

img {
  display: block;
}

  
Какой-то текст, может быть шире чем картинка ниже
  



  
АааааааааааааааааааааааааОднострочный
  



  
Но словааааааааааааааааа просто так не разрываются
  



Ответ 2

Нужно сделать таблицу шириной 1%. В ячейку вставить картинку, которая будет растягивать
эту таблицу. А во второй ячейке текст будет подстраиваться под ширину таблицы. В разных
браузерах не тестировал, но должно быть максимально кроссбраузерно.




  

    

      
    
    

      В чащах юга жил-был цитрус, но фальшивый экземпляр.
    
  


  

    

      
    
    

      В чащах юга жил-был цитрус, но фальшивый экземпляр.
    
  



Ответ 3

Вот пример с использованием js кода. При загрузке страницы считывает ширину картинки
и по ней определяет ширину загаловка h2.



$(document).ready(function(){
  $('.block>h2').css({'width': $('.block>a>img').width()+'px'});
});
.block{
  display: inline-block;
  
}


    
Какой-то текст, может быть шире чем картинка ниже
    





Вот второй вариант без js и flex, но тут размеры картинки могут быть больше чем его
настоящие размеры.



.block{
  max-width: 50%;
}

.block img{
    width: 100%;
    height: auto;
}

    
Какой-то текст, может быть шире чем картинка ниже