将图像在div内对齐

Question

我有div，其宽度小于其中的图片，div已将溢出设置为隐藏。所以图像只能从左边看到一些部分。

我希望从右边看到那个图像。

HTML

<div id="my_div">
    <img src="some_image.jpg" width="600" />
</div>

CSS

#my_div {
    position: relative;
    width: 300px;
    overflow: hidden;
}

所以我只看到左边50％的图像。我希望从右边看到50％的图像。我不想看到整个图像。怎么办呢？

修改

我无法设置CSS：

position: absolute;
right: 0px;

还有其他解决方案吗？

Answer 1

尝试这样的事情：

#my_div {
    width: 300px;
    overflow: hidden;
    position: relative;
}

#my_div img {
    position: absolute;
    right: 0;
}

第二个解决方案 你也可以这样做

#my_div {
    width: 300px;
    overflow: hidden;
}

#my_div img{
    float:right;
}

它工作正常，但我仍然不明白为什么你使用的图像你不想在网站上看到。你为什么不裁剪它？ ：）

Answer 2

解决方案＃1：

将img浮动到右侧

FIDDLE

#my_div {
  width: 300px;
  overflow: hidden;
  border: 1px solid green;
}
#my_div img {
  float: right;
}

<div id="my_div">
  <img src="http://placehold.it/600x150" width="600" />
</div>

解决方案＃2：

在容器上设置direction: rtl;

FIDDLE

#my_div {
  width: 300px;
  overflow: hidden;
  border: 1px solid green;
  direction: rtl;
}

<div id="my_div">
  <img src="http://placehold.it/600x150" width="600" />
</div>

Answer 3

float:right;财产怎么样？由于隐藏溢出，您只能看到图像的右侧部分。

#my_div img {
    float:right;
}

Fiddle

Answer 4

给父div一个相对位置。 并将图像包装在子div中并使其成为绝对值。

HTML

<div id="my_div">
<img src="some_image.jpg" width="600" height="300" />
</div>

<强> CSS

#my_div {
    height:300px;
    width: 300px;
    overflow: hidden;
    position:relative;
}

#my_div img{
    position:absolute;
    right:0;
}

JSFiddle

Answer 5

您可以使用flexbox解决此问题

justify-content: flex-end;

fiddle here