Kat

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

Рекомендованные сообщения

А можно как-нибудь вписать 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 я задать не могу, только для внешнего дива, отсюда такое странное условие задачи.

Изменено пользователем Kat

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

Изменено пользователем web-monster

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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


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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

.div_class * {

max-width: 100%;

max-height: 100%;

}

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Статистика пользователей

    46 180
    Всего пользователей
    3 128
    Рекорд онлайна
    evgengold
    Новый пользователь
    evgengold
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.