Question

我是CSS编程的新手。使用overflow:hidden隐藏大于DIV区域的图像。也许我希望图像的隐藏部分应该在左侧部分，但目前它正在采取正确的部分。我的代码如下所示。

Html代码：

<div class="a1">
<img src="img/image4.jpg">
</div>

CSS：

 .a1{height:200px;width:100px; overflow:hidden;}

Answer 1

试试这个（注意direction: rtl;）：

＆＃13;

.a1 {
  height:200px;
  width:100px;
  overflow:hidden;
  direction: rtl;
}

＆＃13;

<div class="a1">
  <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b">
</div>

＆＃13;

Answer 2

＆＃13;

.a1 {
  height:200px;
  width:100px;
  overflow:hidden;
  background:#ff0;
}

＆＃13;

<div class="a1">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b">
</div>

＆＃13;

似乎对我来说很好。我添加了黄色背景以显示DIV所在的位置并链接到SO精灵。

如果您获得了不同的效果，那么您网页上的CSS很可能会在其他地方出现级联并导致冲突。

旁注：在CSS中编写样式表并不是真正的＃34;编程＆＃34;。：）

点击运行代码段以查看此操作。

或者，反过来说：

＆＃13;

.a1 {
  height:200px;
  width:100px;
  overflow:hidden;
  background:#ff0;
}

＆＃13;

<div class="a1">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b" align="right">
</div>

＆＃13;

Answer 3

.a1 {
  height:200px;
  width:100px;
  overflow:hidden;
  direction: rtl;
}

<div class="a1">
  <img src="https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

Answer 4

将float:right用于图片元素

<div style="width:200px; height:200px; overflow:hidden">

    <img style="float:right" src="url" />

</div>