28

このコードを検討してください...

<div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black">
  <div id="inner">
    <img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg">
  </div>
</div>

画像の左上隅のみが表示されるようにするには、どのスタイルを追加する必要がありますか?

背景画像を使用したくないことに注意してください。質問は実際にはdivに関するものであり、信じられないかもしれませんが、ウサギは私のアプリケーションの一部ではありません。ああ、「実生活」ではインラインCSSを使用しません。

4

6 に答える 6

26 
div#outer { overflow:hidden; }​

ここでのデモ: http://jsfiddle.net/J34aJ/

于 2012-07-30T17:11:20.253 に答える
3

div を失い、div#innerに追加できます。overflow: hidden;#outer

#outer {
  overflow: hidden;
}
于 2012-07-30T17:12:21.813 に答える
2

次のように簡単です。

overflow: hidden;
于 2012-07-30T17:09:27.893 に答える
1

外側の div スタイルを書き直して適用するoverflow:hidden

<div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black; overflow:hidden;">
      <div id="inner">
        <img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg">
      </div>
    </div>
于 2012-07-30T17:11:54.127 に答える
0

ルールに追加overflow: hiddenしてください: http://jsfiddle.net/saluce/qJWte/#outer

<div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black; overflow: none">
  <div id="inner">
    <img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg">
  </div>
</div>​
于 2012-07-30T17:12:00.697 に答える