Картинка по размеру.

[Александр3]

Здравствуйте. В качестве обучения, решил написать копию вконтакте(естественно визуально, никаких сообщений, записей на стене не будет) и столкнулся с таким вопросом.

<div class="ava">
	  <div class="ramka">
	   <!-- <img src="image/kyz.jpg">-->
	  </div>
</div>

2 класса.1 это белая часть, второй чёрная. Там где чёрная должна быть аватарка, как сделать, чтобы какую бы я картинку не вставлял, она не выходила за эту рамку? Описать надо не в html, а в css. И нужно так, чтобы картинка не уменьшалась полностью в размере, а просто в чёрную область вставлялась часть картинки.
http://programmersforum.ru/attachmen...1&d=1474391556

[Вадим Мошев]

Для чёрной области поставьте свойство: overflow: hidden.

[Александр3]

О, прикольно. Спасибо. Часто видел это свойство, а что оно делает не читал.

[Александр3]

А можно ещё такой вопрос. С помощью какого свойства я могу перемещать эту картинку? Т.е, чтобы она не с верхнего левого угла начиналась, а с заданной координаты. Пробовал left и top, но судя по всему здесь по другому)

[Naive]

Чтобы сделать это картинкой (<img>), нужен немалый комплекс мер и знаний. Писать за тебя это врятли кто будет, так что ставь через CSS.
Кстати, насколько помню, в старой версии ВК, картинка ставилась как раз через этот самый "немалый комплекс мер", но сейчас они делают это на уровне сервера.

[uberchel]

<style>
    .image-box { width:200px; max-height:300px; overflow:hidden; }
    .image-box img { width:100%; max-width:200px;  border:1px solid #CCC; }
</style>
<div class="image-box">
	<img src="https://pp.vk.me/c626419/v626419774/6dc7/F6kbXNuHiyU.jpg">
</div>

[Naive]

Сообщение от uberchel

<style>
    .image-box { max-width:200px; max-height:300px; overflow:hidden; border:1px solid #CCC; }
    .image-box img { width:100%; max-width:200px; border:none; }
</style>
<div class="image-box">
	<img src="https://pp.vk.me/c626419/v626419774/6dc7/F6kbXNuHiyU.jpg">
</div>

Для бутстрапа писал? Твой имидж-бокс по-дефолту будет 202 пикселя реальной ширины, если его контейнер не будет ограничен под 200.
+ твой код не решает проблему, если изображение большое и надо показать его часть и сместить его в центр (с учетом того, что пикча должна быть показана через img, а не через background).

UPD: хотя да, задачу ТС код решает

[uberchel]

Ну я и решал задачу ТС-а, под бустрап я тут не писал, если же ему надо считать конкретно только от самого блока то пусть пропишет box-sizing:content-box; и все. По поводу - если картинка больше, то код отлично обрежет нижнию часть, уменьшив картинку до размера блока, а если не надо обрезать, то проблем нет убрать ограничение у картинки по ширине, то она будет обрезаться по ширене блока.

    .image-box { max-width:200px; max-height:300px; overflow:hidden; border:1px solid #CCC; }
    .image-box img { width:100%; max-width:200px; border:none; }

этот код кривой, я писал не думаю о IE, переписал уж в своем посте

[Naive]

Сообщение от uberchel

Ну я и решал задачу ТС-а, под бустрап я тут не писал, если же ему надо считать конкретно только от самого блока то пусть пропишет box-sizing:content-box;

как раз в данном случае нужен border-box

Сообщение от uberchel

и все.

А для самой картинки надо поставить либо:
1. max-width: 198px;
2. max-width: 100%;
3. margin: -1px;
Для картинки из примера, я бы выбрал 3 вариант. Для картинки, чьи размеры мне не известны — второй.

[uberchel]

в данном да, а на том, что в посте у тебя, нет