CSS从不同方向更改元素宽度 [英] CSS change element width from different direction

问题描述

我有一个div，其中包含一个这样设置的图像元素:

I have a div that contains an image element set up as such:

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

和CSS:

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

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

当前容器宽度小于img宽度，这意味着图像的右侧部分被裁剪掉了，这正是我想要的.但是，我希望将图像的左侧部分切掉.

Currently the container width is smaller then the img width meaning that right part of the image is cropped out which is what I want. However, I would like the left part of the image to be cut out instead.

我尝试了背景定位的实验，但没有得到我想要的.有谁知道实现此目标的正确方法?

I've tried experimenting with background positioning but haven't gotten what I wanted. Does anyone know of the correct way to achieve this?

为澄清起见，我想实现下面蓝色框中所表示的效果(其中淡出的部分实际上实际上是不可见的):

To clarify, I would like to achieve the effect represented in the blue box below (where the faded out section isn't actually visible of course):

推荐答案

这应该有效:

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

#container img {
  width: 200px;
  height: 200px;
  margin-left: -50px;
}

这篇关于CSS从不同方向更改元素宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！