Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Фото разных размеров, как сделать через css, все одинаковые размеры ??

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


     31.12.2013    Общие вопросы по вёрстке    4213

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

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

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

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

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

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


Комментарии пользователей (17)

psarovskiy
37 | 13

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

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

vitnet
218

2171 | 930

vitnet - 31 декабря 2013 14:19 - Эксперт

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

http://htmlbook.ru/css/overflow

vlits
3

108

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

vitnet,

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

я сделал так:

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

vlits
3

108

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

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

vlits
3

108

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

вышло так

vitnet
218

2171 | 930

vitnet - 31 декабря 2013 20:56 - Эксперт

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

vlits
3

108

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

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

Dr.Parlament
2

17 | 12

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

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

vlits
3

108

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
3

108

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

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

vlits
3

108

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

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

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

psarovskiy
37 | 13

psarovskiy - 31 декабря 2013 18:31 - Юзер


neadekvad
2

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
3

108

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

путаешь )

vlits
3

108

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

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

vlits
3

108

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
3

108

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

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

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

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