Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Фото и css

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3

Открыть новую тему     Написать ответ в эту тему

newbies



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Да, кто то до сех пор понять меня не может,
вы знаете зачем я сделал там height: 250px; ???
 
Если сделать так как вы советуете то выходит вот так:

 
Одна фото по горизонту вытянута, а другая по вертикали,  а css так как у меня было сделано, он как бы скрывал лишнею часть фото и показывал все фото как одно ! то есть размер у всех был квадратный, по этому не стоит убирать height: 250px;
 
вообщем, что то не то  вышло,  как мне реализовать что бы css вырезал область из фото что бы все фото были одинаковые квадртаные, что бы фото не сжималось , а просто что бы вырезалась часть  та что не нужна как бы...

Всего записей: 2112 | Зарегистр. 23-06-2006 | Отправлено: 12:47 31-12-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
newbies
Вы не для того сделали 250, не родителю надо.
Остальное потом - 4 ночи уже.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 13:01 31-12-2013
newbies



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
объясню по другому
 
Первая картинка, фото разных размеров.
 

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

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

Всего записей: 2112 | Зарегистр. 23-06-2006 | Отправлено: 13:11 31-12-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
newbies
Я и так все понял. Я ещё раз повторяю  - не родителю высоту надо ставить. А как "обрезать" я уже показал - фоновым изображением, раньше же был пример.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 13:41 31-12-2013
newbies



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
если ставить  у картинки где img
 
не
max-width: 383px;
max-height: 400px;
 
а это
width: 383px;
height: 250px;
 
 
он не вырезает, он тупо присваивает размер картинки то есть искажает её )))

Всего записей: 2112 | Зарегистр. 23-06-2006 | Отправлено: 13:56 31-12-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
newbies
Ещё раз - блочный элемент, с указанными размерами и картинкой в фоне, обрежет как хочется.
Можно даже добавить background-size: contain;
А чтобы блочные шли рядами - float: left или display: inline-block

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 14:05 31-12-2013
newbies



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ну да ничего не обрезает ))))
 
я вот не знаю зачем вы советуете если вы сами не пробовали.
 
Добавлено:
.apartfotofull {
 
width: 800px;  
overflow: hidden;  
margin-left: 8px;
margin-top: 8px;
margin-bottom: 8px;
 
}  
.apartfotofull img {
display: inline-block;
background-size: contain;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
width: 383px;
height: 250px;
border: 1px solid #FFDDEF;
}  
 
и так пробовал
 
.apartfotofull {
display: inline-block;
background-size: contain;
width: 800px;  
overflow: hidden;  
margin-left: 8px;
margin-top: 8px;
margin-bottom: 8px;
}  
.apartfotofull img {
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
width: 383px;
height: 250px;
border: 1px solid #FFDDEF;
}  
 
не то все ) тут   и так все понятно, если в img  ставить
width: 383px;
height: 250px;
 
то какая бы фотка не была  он будет её делать в этот размер что зада.
и искажать её, если фото вытянуто вверх.

Всего записей: 2112 | Зарегистр. 23-06-2006 | Отправлено: 14:15 31-12-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
newbies
Надоело, разбирайтесь сами стакими претензиями. Я вам сто разговорил - не трогайте родителя.  
Внутри apartfotofull должны быть блочные элементы указанных размеров, с картинкой в фоне, а не как вы пытаетесь делать. Удачи, у меня нет желания помогать далее с такими претензиями. А код с планшета я вводить не собираюсь - предлагал же подождать.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 14:22 31-12-2013
newbies



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
не просто вы что то советуете, я пробую, и выходит что совет бесполезный, вы бы пример бы аписали и все было бы понятно.  
 
можно было бы просто не отвечать если не можете помочь.

Всего записей: 2112 | Зарегистр. 23-06-2006 | Отправлено: 15:36 31-12-2013
CodeKeeper

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
http://www.w3schools.com/cssref/pr_pos_clip.asp
 
http://google.gik-team.com/?q=css+crop
 

Цитата:
не просто вы что то советуете, я пробую, и выходит что совет бесполезный, вы бы пример бы аписали и все было бы понятно.  

 
Может за тебя еще и заказ сделать?

Всего записей: 24 | Зарегистр. 28-12-2013 | Отправлено: 16:13 31-12-2013 | Исправлено: CodeKeeper, 16:18 31-12-2013
newbies



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
да это не заказ, это я для себя делаю.
 
ага вырезает область и показывает, а как сделать что бы центр показывал в фото ?
 
только он у меня опять все фото в кучу собрал, фото под фото !
 
Добавлено:
можно еще вот так:
 
.apartfotofull{
width:383px;
height:250px;
overflow:hidden;
}
 
он он показывает все фото в куче, одна под одной )
 
<div class="apartfotofull">
<a href="#"><img src="34390.jpg" /></a>
<a href="#"><img src="34390.jpg" /></a>
<a href="#"><img src="34390.jpg" /></a>
<a href="#"><img src="34390.jpg" /></a>
<a href="#"><img src="34390.jpg" /></a>
</div>

Всего записей: 2112 | Зарегистр. 23-06-2006 | Отправлено: 16:40 31-12-2013
CodeKeeper

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
ага вырезает область и показывает, а как сделать что бы центр показывал в фото ?  

 
А почитать литературу по css и возможно jquery?
 
Писец, да у тебя и верстка кривая.  
 
1) Сделай общий контейнер обертку для всего блока изображения с фиксированной шириной.
 
2) оберни каждую ссылку с изображением в контейнер, тоже с фиксированной шириной и поставь ему выравнивание слева или справа(подсказка, создай два класса)
 
3) внутри контейнера обрезай изображение и размещай его с помомошью(хотя это уже говноверска, нужно все изображения кропать до одного размера с соблюдением пропорций) его например так http://habrahabr.ru/post/189696/

Всего записей: 24 | Зарегистр. 28-12-2013 | Отправлено: 16:51 31-12-2013 | Исправлено: CodeKeeper, 16:52 31-12-2013
newbies



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
вот еще хороший пример, вырезает все как надо
 
.apartfotofull {
width:383px;
height:250px;
overflow:hidden;
margin-left: 8px;
margin-top: 8px;
margin-bottom: 8px;
 
}  
 
можно сделать что бы показывало по центру картинки с помощь отступов через маргин
 
.apartfotofull img{
margin:-100px -50px -50px -100px;
}  
 
а можно ли через маргин сделать, что бы отступы были от лева и от верха по 50% что бы выходило так что ровно по середине показывало. ну или почти. ??
 
а так же опять проблема, все фото под одной.
 
у меня тут 00:00, а я тут сижу херотой страдаю )))

Всего записей: 2112 | Зарегистр. 23-06-2006 | Отправлено: 17:05 31-12-2013
CodeKeeper

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
У тебя не правильная верстка. У тебя строчные элементы и ведут себя они так же. Или делай "а" блочным элементом или оборачивай каждое изображение в div.  

Всего записей: 24 | Зарегистр. 28-12-2013 | Отправлено: 17:10 31-12-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
newbies

Цитата:
у меня тут 00:00

и это наши проблемы?
 

Код:
<div class="apartfotofull">
<a href="#">&nbsp;</a>
<a href="#">&nbsp;</a>
<a href="#">&nbsp;</a>
<a href="#">&nbsp;</a>
<a href="#">&nbsp;</a>
<a href="#">&nbsp;</a>
<a href="#">&nbsp;</a>
<a href="#">&nbsp;</a>
</div>

 

Код:
.apartfotofull {
float: left;
width: 706px;  
overflow: hidden;  
border: 1px solid #FFDDEF;
margin-left: 8px;
margin-top: 8px;
margin-bottom: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}  
.apartfotofull a {
float: left;
height: 260px;
width: 345px;
padding: 2px;
margin: 2px;
background: url(34390.jpg) center center;
background-size: contain;
}
 
.apartfotofull a:hover{
opacity:0.6; -moz-opacity:0.6; filter:alpha(opacity=60);
border: 0px solid #FC4E9C;
}

 
background-size: contain; это CSS3, поэтому поддерживается не всеми браузерами (IE9+).
и тогда будет именно центральная часть изображения, которая помещается в <a> тег указанных размеров, оно не будет масштабироваться по размеру.
 
background: url(34390.jpg) center center с нужной картинкой прописывается у style каждого <a> с нужной картинкой
хочется "обрезать" не по центру - меняйте center center на соответствующие параметры.
 
CodeKeeper
ну, теперь вы понимаете причину многостраничных тем ?) есть некоторые люди, которые ожидают решения на блюдечке, с подробным объяснением и никак не меньше этого.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 06:35 01-01-2014 | Исправлено: Cheery, 06:37 01-01-2014
CodeKeeper

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
CodeKeeper  
ну, теперь вы понимаете причину многостраничных тем ?) есть некоторые люди, которые ожидают решения на блюдечке, с подробным объяснением и никак не меньше этого.

 
Теперь понял. Даже понял что автору главное сделать абы как,а не по нормальному. Кстати с НГ.

Всего записей: 24 | Зарегистр. 28-12-2013 | Отправлено: 18:33 01-01-2014
newbies



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
да нет я решения как бы не ожидаю, я  ожидаю подсказки и потом иду рою информацию и пробую варианты как и что сделать.
 
Добавлено:
как быть с этим ?
 
 background: url(34390.jpg) center center;  
 
картинку то я не могу вставлять в css, мне надо в html вставлять.
точнее там будет все через загрузку работать и он сам будет вставлять,  я просто стиль  прикручиваю и все.
 
Добавлено:
как бы еще так сделать что бы по центру было, вот  рабочий вариант
 
.apartfotofull {
float: left;
width:383px;
height:250px;
overflow:hidden;
margin-left: 8px;
margin-top: 8px;
margin-bottom: 8px;
}  
.apartfotofull img{
margin:-100px -50px -50px -100px;
}

Всего записей: 2112 | Зарегистр. 23-06-2006 | Отправлено: 06:51 03-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
newbies

Цитата:
картинку то я не могу вставлять в css, мне надо в html вставлять.

а вы как думаете? написал же  

Цитата:
с нужной картинкой прописывается у style каждого <a> с нужной картинкой  

 

Цитата:
как бы еще так сделать что бы по центру было,

оно и так по центру, из за center center
 
 

Цитата:
да нет я решения как бы не ожидаю, я  ожидаю подсказки и потом иду рою информацию и пробую варианты как и что сделать.  

да ладно.. а это как называется?
Фото и  css
то, что вы не понимаете простые объяснения, еще не означает что они не работают.
 
как примеру..

Цитата:
как бы еще так сделать что бы по центру было, вот  рабочий вариант  

все снова лезете со своим img тегом.. то есть давите свой вариант, который, как вам уже сказали, не подходит.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 07:09 03-01-2014 | Исправлено: Cheery, 07:14 03-01-2014
newbies



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ага я понял,   такой вариант подходит для одной картинки, а у меня как бы новостные картинки в постах.
 
вот вариант с центрованием
 
.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;
}

Всего записей: 2112 | Зарегистр. 23-06-2006 | Отправлено: 08:17 03-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
newbies

Цитата:
такой вариант подходит для одной картинки

он подходит для любого количества картинок
 
<a style='background: url(image1.jpg) center center'></a>
<a style='background: url(image2.jpg) center center'></a>
<a style='background: url(image3.jpg) center center'></a>
...

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 08:40 03-01-2014
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3

Компьютерный форум Ru.Board » Интернет » Web-программирование » Фото и css


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru