Форум

Siend · #1 (**permalink**) 02.10.2015, 12:45

Ребят, есть в 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

Сообщение от 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>

Siend · #3 (**permalink**) 02.10.2015, 13:56

Забыл уточнить, картина вертикальная) Потому и обрезается)

Siend · #4 (**permalink**) 02.10.2015, 18:08

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

Вот так вот я решил эту проблему.

ruslan_mart · #5 (**permalink**) 03.10.2015, 18:15

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

Форум

Справочник

Discord чат

Курсы javascript