Sign in to follow this  
Kat

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

Recommended Posts

А можно как-нибудь вписать 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 by Kat

Share this post


Link to post
Share on other sites

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

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

Edited by web-monster

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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


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

Share this post


Link to post
Share on other sites

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

.div_class * {

max-width: 100%;

max-height: 100%;

}

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,433
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.