-1

У меня есть изображения. Все они большего размера чем блок, в котором он должен лежать. Я задал размеры блока которые мне нужны и overflow: hidden; изображение обрезалось по тем размерам, которые мне нужны, но показывается левая верхняя часть. Как мне можно двигать изображения, чтоб отображаемую часть можно было выставить на то место изображения, куда я хочу. Пробовал margin, но значение margin получается отрицательным, что есть не good practice.

5
  • 3
    Свойство background-position пробовали?
    – RealPeha
    14 апр 2018 в 9:54
  • 1
    Что бы получить внятный ответ, вопрос тоже должен быть внятным... Покажи код...
    – Air
    14 апр 2018 в 9:56
  • @Air человек выше понял... 14 апр 2018 в 10:00
  • @RealPeha спасибо большое 14 апр 2018 в 10:00
  • Я тоже понял.... Только на сайте есть правило... Вопросы надо оформлять в соответствии с требованиями формата сайта...
    – Air
    14 апр 2018 в 10:20

1 ответ 1

0

Вы можете использовать на своих изображениях свойство object-fit. Или использовать его как фон со свойством background-size: cover , contain и т.д..

.container {
  width: 300px;
  height: 100px;
  display: block;
  overflow: hidden;
  border: 1px solid #ccc;
}
.container img {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: auto;
  max-height: 100%;
  max-width: 100%;
}

.container2 {
  width: 300px;
  height: 100px;
  display: block;
  overflow: hidden;
  border: 1px solid #ccc;
  text-align: center;
}
.container2 img {
  object-fit: contain;
  object-position: 50% 50%;
  width: auto;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}


.oroginal {
width: 300px;
}

.oroginal img {

  max-width: 100%;
}
object-fit: cover; -
<div class="container">
<img src="http://i.piccy.info/i9/5989c7590cf070775150d3c866e03bd7/1523701877/72880/1237156/Avances_tecnologicos_actuales_1.jpg" >
</div>
object-fit: contain; -
<div class="container2">
<img src="http://i.piccy.info/i9/5989c7590cf070775150d3c866e03bd7/1523701877/72880/1237156/Avances_tecnologicos_actuales_1.jpg" >
</div>
<hr>

background-size: cover; - 
<div class="container" style="
background-image: url(http://i.piccy.info/i9/5989c7590cf070775150d3c866e03bd7/1523701877/72880/1237156/Avances_tecnologicos_actuales_1.jpg);
       background-size: cover;
       background-position: center  center;
       background-repeat: no-repeat;
"></div>
<hr>

original img -
<div class="oroginal">
<img src="http://i.piccy.info/i9/5989c7590cf070775150d3c866e03bd7/1523701877/72880/1237156/Avances_tecnologicos_actuales_1.jpg" >
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.