2

私は内側とのを持っています。私の問題: 外側の div は、border-radius と overflow: hidden を取得しました。画像は親よりも幅が広いです。しかし、overflow: hidden は画像の残りの部分を隠すのにうまく機能します。画像ではなく、border-radius のみが機能します。なんで？

私のHTML構造：

<div class="teaser-container tc1-sidebar">
<a href="#"> 
<img class="teaser-image bottom" src="dist/img/teaser/bigteaser-bonus-hover.jpg" alt="teaser"><img class="teaser-image top" src="dist/img/teaser/bigteaser-bonus.jpg" alt="teaser">
</a>
</div>

外側の CSS :

    position: relative;
    overflow: hidden;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
    border-radius: 10px;

内部の CSS:

position: absolute;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

回避策をありがとう！

私の問題を見てください: http://jsfiddle.net/7h4SD/

4

1 に答える 1

0

これが機能するかどうかを確認する簡単な回避策

フィドル

CSS ---

    .box-s1 {
    width: 360px;
    height:360px;
    border: 1px solid #515355;
    margin: 10px 0px 10px 0px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 60px;
    background: url('http://weirdmovievillage.files.wordpress.com/2010/12/dexter-main-iamge1.jpg');
}

HTML

 <!-- 
* basic problem: image is wider than box. 
* round-corners don't grip 
-->

<div class="teaser-image-box box-s1 tib-ef1">

</div>

回避策があなたに合わない場合はお知らせください。基本的に、高さと幅を設定すると、画像の高さと幅に等しくなります:)画像を追加したままにして、高さを確認しながら可視性を変更することもできます

display:none

画像をそこに表示したい場合:)

于 2013-09-25T15:10:11.080 に答える