Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Фото разных размеров, как сделать через css, все одинаковые размеры ??

Фото разных размеров, как сделать через css, все одинаковые размеры ??


     31.12.2013    Все вопросы » Общие вопросы по вёрстке    5311

вопрос
Первая картинка, фото разных размеров.

Фото разных размеров, как сделать через css, все одинаковые размеры ??

Вторая каартинка, через css можно как то сделать, что бы показыалась не вся фотка, а что бы показывалось определнная область фото, заданная по width и height.
Фото разных размеров, как сделать через css, все одинаковые размеры ??

а та часть что прозрачная css прячит и все.

Кто понял, и может мне подсказать как это реализовать.

Ответа пока нет


17 комментариев

psarovskiy
Юзер

psarovskiy - 31 декабря 2013 14:09 -

через css никак
через css фото либо растягивать либо сжимать до размеров родителя, обрезая и скрывая то, что выходит за пределы

vitnet
Эксперт

vitnet - 31 декабря 2013 14:19 -

max-width: ширина;
max-height: высота;
overlow: hidden;

http://htmlbook.ru/css/overflow

vlits
Юзер

vlits - 31 декабря 2013 15:38 -

vitnet,

а как правильно сделать ?

я сделал так:

.apartfotofull img {
overlow: hidden;
max-width: 383px;
max-height: 250px;
}

vlits
Юзер

vlits - 31 декабря 2013 15:39 -

он так не вырезает ! как я хотел
он просто выровнял картинки по height под 250

vlits
Юзер

vlits - 31 декабря 2013 15:41 -

вышло так

vitnet
Эксперт

vitnet - 31 декабря 2013 20:56 -

Что-то вроде получилось http://jsfiddle.net/rEdVQ/38/

vlits
Юзер

vlits - 31 декабря 2013 15:45 -

psarovskiy,
можно сделать, я делал, но не помню как.

Dr.Parlament
Юзер

Dr.Parlament - 31 декабря 2013 16:04 -

Вам может помочь файлик по имени timthumb.php.

vlits
Юзер

vlits - 31 декабря 2013 15:49 -

я попробовал так:
html
<a href="#"><img class="apartfotofull1" src="34390.jpg" /></a>
<a href="#"><img class="apartfotofull1" src="13.jpg" /></a>
<a href="#"><img class="apartfotofull1" src="34390.jpg" /></a>
<a href="#"><img class="apartfotofull1" src="34390.jpg" /></a>
<a href="#"><img class="apartfotofull1" src="34390.jpg" /></a>
<a href="#"><img class="apartfotofull1" src="34390.jpg" /></a>

css
.apartfotofull1 {
width: 383px;
height: 250px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #FFDDEF;
}

.apartfotofull1 img {
margin: 10px;
overflow: hidden;
max-width: 500px;
max-height: 500px;
}

vlits
Юзер

vlits - 31 декабря 2013 15:49 -

так он растягивает :(

vlits
Юзер

vlits - 31 декабря 2013 16:07 -

Цитата: Dr.Parlament
timthumb.php.

что это и для чего ?

psarovskiy
Юзер

neadekvad
Юзер

neadekvad - 1 января 2014 01:01 -

https://code.google.com/p/timthumb/ + доп поле самый оптимальный вариант
<img src=".../timthumb.php?src=[xfvalue_доп_поле]&amp;h=размер&amp;w=размер&amp;zc=1" alt="{title}" title="{title}"/>

если я ничего не путаю конечно :)

vlits
Юзер

vlits - 3 января 2014 06:31 -

путаешь )

vlits
Юзер

vlits - 3 января 2014 06:33 -

зачем что то ставить и портить фото, http://zavrab.com/kak-delat-kartinki-neobxodimogo-razmera-v-dle/
это то же байда...

vlits
Юзер

vlits - 3 января 2014 08:18 -

вариант с центрованием
.apartfoto {
width: 366px;
height: 250px;
overflow: hidden;
border: 1px solid #FFDDEF;
margin: 10px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.apartfoto img {
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -100px;
max-width: 500px;
max-height: 500px;
}

vlits
Юзер

vlits - 6 января 2014 13:39 -

кто еще какие варианты знает ?
что бы показывалась фотка по центру

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх