画像が角の丸いボックスからはみ出さないようにするにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/587814

  •  06-09-2019
  •  | 
  •  

質問

このコードを使用すると、画像は div の丸い角によって切り取られません (結果として、画像の四角い角が div の丸い角を覆います)。

<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;">
    <img src="big-image.jpg" />
</div>

子の画像がオーバーフローしないように丸みを帯びたコーダー div を取得する方法を知っている人はいますか?

役に立ちましたか？

解決

これは、またはあなたの状況では動作しますが、画像にCSSの背景をすることを検討しない場合があります。 FF3では、次はうまく機能します：

<div style="
  background-image:   url(big-image.jpg);
  border-radius:      1em;
  height:             100px;
  -moz-border-radius: 1em;
  width:              100px;"
></div>

私は別の回避策がありますかわからない - あなたがイメージそのもの（たとえば、深い1em）に境界線を適用する場合は、正方形の四隅の同じ問題を取得します。

。

の編集の場合、「画像に枠を追加」で、画像のはめ込みが正しい、にもかかわらず、それは画像がdiv要素と同一平面ではないだけということです。結果をチェックアウトし、（必要に応じて、適宜設定style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;"とimg有する）widthタグにheightを追加します。

他のヒント

私の最新のクロム、Firefox、およびSafariはコンテナの境界線の半径（意図したように）に画像をクリップします。

http://jsfiddle.net/RQYnA/12/embedded/result/

は、Firefox 15で、私は、コンテナが{overflow: hidden}を持っていたときにクリップされた画像を参照してください。 （子コンテンツのクリッピングはのGecko 2.0で追加されているようです。）

は、クロム23＆サファリ5において、Iは画像がクリップ参照ののみの容器は{position: static; overflow: hidden}を有し、画像が{position: static}を有する場合。

overflowがhiddenに設定されている場合でも、

、border-radiusは、その内容をクリップしません。これは仕様によるものです。

一つの解決策は、画像だけでなく、その容器にborder-radiusを設定することであろう。

<div style="border-radius: 16px; ...">
    <img src="big-image.jpg" style="border-radius: 16px; ..." />
</div>

別の方法は、background-imageを使用して、コンテナの背景として画像を設定することであろう。しかし、バージョン3（参照このバグを前に、Firefoxでこの方法で問題があります） - その必要性はあなたにあまり気にしないこと

。

この回避策を試してください。

  1. の画像 img タグが存在し、そこで幅と高さを設定します。
  2. それからそれを隠します visibility:hidden. 。幅と高さはそのまま残ります。
  3. その後、同じソースを背景画像として設定し、クリップされます。

<a class="thumb" href="#" style="background-image: url('./img/pic1.jpg');" title="Picture">
  <img border="0" src="./img/pic1.jpg" alt="Pic" height="100" width="150" />
</a>

#page .thumb {
background-repeat: no-repeat;
background-position: left top;
border: 3px #e5dacf solid;
display: block;
float: left;}

#page .thumb img {
display: block;
visibility: hidden;}

CSS3で今背景クリップもあります。これは、すべての主要なブラウザで動作します。オプションには、ボーダー・ボックス、パディングボックスとコンテンツ・ボックスです。あなたのケースでは、私はあなたがパディング・ボックスを使用したいと思います。

-webkit-background-clip: padding-box;
-moz-background-clip:    padding; 
background-clip:         padding-box;

は、代わりに、コンテンツの背景画像イメージを行う場合、（少なくともFF3に）丸い角をクリップしないであろう画像

また、丸みを帯びた境界線と画像の間の余分なパディングを追加する画像のためのdivに詰め、またはマージンを追加することができます。

border-radiusタグの簡単なimgは、Firefox 9、Safariの5、クロム16の現在のバージョンでは正常に動作します 

<div>
    <img src="big-image.jpg" style="border-radius: 1em;" />
</div>
絶対：

私は、画像や画像の親が位置する場合、この問題が発生すると思います。絶対的な設定は、文書の流れのうちの要素をとるので、これは理解できる。

私はこのための修正を見てきた90％確信している私が行うとき、私はこの記事を更新します：D

余分なトリミングは境界線の太さの誤差の範囲内通常です。ただ、誤差の範囲は、次への代わりに国境下さに収まるように、内側半径が僅かに小さくしましょう。

<div style='border-radius:5px;border:thin solid 1px;'>
   <img style='border-radius:4px' />
</div>

あなたはオーバーフローで正確な幅と高さを指定する必要があります。隠された、あなたはあなたのdivがあなたのイメージをクリップしたい場合は、

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top