Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.10.2015, 12:45
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

Центрирование картинки
Ребят, есть в css свойство

background-position: 50% 50%;


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

Я же хочу получить тоже самое, только для туга img.

<div class="IMG_PLACE">
<img src="someimg.jpg">
</div>

IMG_PLACE{
width:100px;
height:100px;
overflow:hidden; //Обязательно скрываем лишнее
}

IMG_PLACE img{
width:100%
}


само собой моя картинка обрезается, а начинает с левого верхнего угла. Какие есть варианты по центрированию? исключительно двигать ее с помощью top/left/margin?
Ответить с цитированием
  #2 (permalink)  
Старый 02.10.2015, 12:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от Siend
само собой моя картинка обрезается
где?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
 .IMG_PLACE{
width:100px;
height:100px;
overflow:hidden; //Обязательно скрываем лишнее
}

.IMG_PLACE img{
width:100%;
}

  </style>
</head>

<body>
<div class="IMG_PLACE">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</div>


</body>

</html>

Последний раз редактировалось рони, 02.10.2015 в 12:53.
Ответить с цитированием
  #3 (permalink)  
Старый 02.10.2015, 13:56
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

Забыл уточнить, картина вертикальная) Потому и обрезается)
Ответить с цитированием
  #4 (permalink)  
Старый 02.10.2015, 18:08
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

.parrent{
position:relative;
width:100px;
}
.child {
    width: 100%;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}


Вот так вот я решил эту проблему.
Ответить с цитированием
  #5 (permalink)  
Старый 03.10.2015, 18:15
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Siend, только вместо 9999px напиши: 0.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки при нажатии на маленькие картинки comb Элементы интерфейса 4 23.03.2015 01:08
Очистка памяти, отмена загрузки картинки, отмена события. zhurchik Общие вопросы Javascript 16 23.10.2014 13:48
Идентифицировать картинки MellDixX Общие вопросы Javascript 8 04.08.2013 18:16
Получение координат от картинки EmDmAl Events/DOM/Window 4 08.11.2009 14:34
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42