CSS изменяет ширину элемента с другого направления

У меня есть div, который содержит элемент изображения, настроенный как таковой:

<div id="container">
  <img src="cat.jpg"/>
</div>

И CSS:

#container {
  width: 150px;
  height: 200px;
}

#container img {
  width: 200px;
  height: 200px;
  overflow: none;
}

В настоящее время ширина контейнера меньше ширины img, что означает, что правая часть изображения обрезается, чего я и хочу. Однако я бы хотел, чтобы левая часть изображения была вырезана.

Я пробовал экспериментировать с позиционированием фона, но не получил того, что хотел. Кто-нибудь знает правильный способ добиться этого?

Чтобы уточнить, я хотел бы добиться эффекта, представленного в синем поле ниже (где затемненная часть, конечно, на самом деле не видна):

введите здесь описание изображения


html css background-image
person MeltingDog    schedule 19.11.2013    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Это должно работать:

#container {
  width: 150px;
  height: 200px;
  overflow: hidden;
}

#container img {
  width: 200px;
  height: 200px;
  margin-left: -50px;
}
person Sir Kettle    schedule 19.11.2013

arrow_upward
2
arrow_downward

Вот довольно простое решение...

HTML

<div class="cat"></div>

CSS

.cat {
    position: absolute;
    background-image: url('http://www.deargrumpycat.com/wp-content/uploads/2013/02/Grumpy-Cat1.jpg');
    background-position: right center;
    background-size: 200px 200px; // set bg size
    height: 200px; // no need for container
    width: 150px;
}

ДЕМО

person brbcoding    schedule 19.11.2013

arrow_upward
1
arrow_downward

Вы можете сделать это, перемещая изображение.

http://jsfiddle.net/9AmVA/2/

#container {
  /* Making crop dimensions bigger so I can see the edge of the cat to know it's working correctly */
  width: 600px;
  height: 500px;
  overflow: hidden;
}

#container:after { clear: right;
    display: block;
    height: 0;
    visibility: hidden;
    content: ' '; }

#container img {
  float: right;
}
person Ming    schedule 19.11.2013

arrow_upward
0
arrow_downward 

.container {
    max-width: 150px;
    min-width: 150px;
    height: 200px
    display: inline-block;
    background-image: url("PATH-TO/YOUR-IMAGE.JPG");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow:hidden;
}

.container img {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    visibility: hidden;
}

Используя размер и положение фона, вы будете иметь гораздо больший контроль над позиционированием или композицией изображения. вы также можете автоматизировать это с помощью javascript. Я бы предложил не использовать идентификатор, вместо этого используйте className или атрибут данных.

person vssadineni    schedule 25.10.2018