Как вписать картинку в div?

Kat · July 17, 2011

А можно как-нибудь вписать image в div фиксированного размера (120x120), чтобы image сжимался, не растягивая див и укладываясь в размер 120x120 (сохраняя пропорции). То есть, если изображение маленькое, 10x20, например, чтобы выглядело как 10x20. Если изображение, 120x180, например, чтобы выглядело как ширинаx120. В общем, если картинка маленькая (меньше 120x120), пусть остается маленькой, как есть. А если большая, пусть пропорционально сжимается, не растягивая родительский div. Но при этом css непосредственно картинке задавать нельзя, только внешним дивам

У меня получилось так, что див растягивается:


<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег STYLE</title>
  <style type="text/css">
   .mm { 

    background-color: blue;
	max-width:120px;
	max-height:120px;

   }
  </style>
 </head> 
<body>
<div class="mm">

<img  src="http://spanish-online.ru/wp-content/themes/nice-wee-theme/images/me.jpg" >

</div>



</body>
</html>

PS: я знаю, что для этой задачи идеально подойдет max-width и max-height для img, но я делаю все на тибко (generalinterface.org), где верстка преобразуется в дивы и css непосредственно для img я задать не могу, только для внешнего дива, отсюда такое странное условие задачи.

Edited July 17, 2011 by Kat

web-monster · July 17, 2011

Может для дива overflow:auto установить?

Тогда при картинках, не помещающихся в блок, будет появляться полоса прокрутки.

Edited July 17, 2011 by web-monster

SelenIT · July 17, 2011

Неужели совсем никакой возможности свои стили картинкам приписать? Хоть <style> в <body> затолкать, на самый-самый крайний случай, если больше совсем уж ничего не остается...

Kat · July 18, 2011

Неужели совсем никакой возможности свои стили картинкам приписать? Хоть <style> в <body> затолкать, на самый-самый крайний случай, если больше совсем уж ничего не остается...

вместо img имеем div c img внутри, и вот этому внешнему диву можно приписывать что угодно, например max-width, max-height задать, или вписать в еще один див. Но картинка все равно выпирает (а самой картинке нельзя ничего задать).

Munk · July 18, 2011

Как выглядит код страницы после "преобразования"?

sigma77 · July 18, 2011

вместо img имеем div c img внутри, и вот этому внешнему диву можно приписывать что угодно, например max-width, max-height задать, или вписать в еще один див. Но картинка все равно выпирает (а самой картинке нельзя ничего задать).

А разве так сделать нельзя?


.div_class img {
    max-width: 100%;
    max-height: 100%;
}

Justnewone · July 18, 2011

или ваще вот так:

.div_class * {

max-width: 100%;

max-height: 100%;

}

с высотой, правда скорей всего от родителя с max-height не просчитается.

Sign In

Как вписать картинку в div?

Question

Kat

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

web-monster

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Kat

Link to comment

Share on other sites

Munk

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information