center image inside overflow-hidden-parent

Question

私はスパンタグ内にイメージを持ち、スパンは設定された幅と高さを持ち、隠しオーバーフローに設定されています。そのため、画像の一部しか表示されません。これは機能しますが、表示される画像の小さな部分が左上隅です。私はそれを目に見えるイメージの中心にしたいと思います。私はイメージを絶対的に配置する必要があると思うが、イメージのサイズは変わる可能性がある。誰も私がしようとしていることをする方法を知っていますか？

ありがとうございます！ここで

はHTMLである：ここでは

<div class="lightbox_images"> 
       <h6>Alternate Views</h6> 
       <span> 
        <a href="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 1"> 
         <img src="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" /> 
        </a> 
       </span> 
       <span> 
        <a href="https://www.kranichs.com/product_images/Simon-G@346_M_346_M.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 2"> 
         <img src="https://www.kranichs.com/product_images/Simon-G@346_M_346_M.jpg" /> 
        </a> 
       </span> 
       <span> 
        <a href="http://www.kranichs.com/images/simong/sim_banner_01.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 3"> 
         <img src="http://www.kranichs.com/images/simong/sim_banner_01.jpg" /> 
        </a> 
       </span> 
       <span> 
        <a href="http://www.kranichs.com/images/psu/psu_banner.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 4"> 
         <img src="http://www.kranichs.com/images/psu/psu_banner.jpg" /> 
        </a> 
       </span> 
      </div> 

はCSSです：HTMLのこの種のを考えると

.lightbox_images{ 
    background-color:#F9F9F9; 
    border:1px solid #F0F0F0; 
} 
.lightbox_images h6{ 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    color:#333333; 
    font-size:14px; 
    font-weight:bold; 
    font-style:italic; 
    text-decoration:none; 
    margin:0px; 
} 
.lightbox_images span{ 
    padding:5px; 
    padding-bottom:15px; 
    background-color:#DFDFDF; 
    margin:5px; 
    display:inline-block; 
    border:1px solid #CCC; 
} 
.lightbox_images a{ 
    display:inline-block; 
    width:60px; 
    height:60px; 
    overflow:hidden; 
    position:relative; 
} 

.lightbox_images a img{ 
    position:absolute; 
    left:-50%; 
    top:-50%; 
} 

.lightbox_images span:hover{ 
    border:1px solid #BBB; 
    background-color:#CFCFCF; 
} 

Answer 1

：

<span><img src="..." width="..." height="..." alt="..." /></span> 

あなたはこのようにCSSを使用することができます。

を

span { 
    position: relative; 
    display: block; 
    width: 50px; /* Change this */ 
    height: 50px; /* Change this */ 
    overflow: hidden; 
    border: 1px solid #000; 
} 
span img { 
    position: absolute; 
    left: -10px; /* Change this */ 
    top: -10px; /* Change this */ 
} 

正確な寸法に基づいて画像の中心を合わせることができます。

また、あなたがHTMLを変更することができるしている場合は、あなたの代わりにこのようなものを使用できます。次に

<div> 
    <a href="...">[name of picture]</a> 
</div> 

を、このCSSでそれを一致させる：この場合

div { 
    width: 50px; 
    height: 50px; 
    background: transparent url(...) center center no-repeat; 
    border: 1px solid #000; 
} 
div a { 
    display: block; 
    height: 100%; 
    text-indent: -9999em; /* Hides the link text */ 
} 

を、そのディメンションに関係なく背景が自動的に中央に置かれ、それでもクリック可能になります。

Answer 2

次の例のように要素の背景として画像を設定し、Xを設定し、Y軸ができ：

#mySpan { 
    background-image: url(myimage.png); 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-position: -10 -10 
} 

Answer 3

画像の幅と高さが変化する場合、私は唯一の方法だと思いますこれはjavascriptで行います。

左の画像をスタイルする：50％;トップ：50％;余白を追加するには、javascript（image onload event）を使用します。 - imageWidth/2 px; margin-top： - imageHeight/2 px;

だから、基本的に、あなたは

span img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 

と、次のjs

window.onload = function() { 

    var images = document.getElementsByTagName('img'); 

    for(i=0; i<images.length; i++) 
    images[i].onload = centerImage(images[i]); 


    function centerImage(img) { 
    img.style.marginLeft = -(img.width/2) + "px"; 
    img.style.marginTop = -(img.height/2) + "px"; 
    } 

} 

PSを持っています。 JavaScriptフレームワーク/ライブラリを使用している場合は、コードを単純化することができますが、私はその前提を立てませんでした。

Answer 4

ビリーモートによるhttps://stackoverflow.com/a/14837947/2227298で提案されているように、画像の高さと幅を知らずに解決策があります。

ここでそれを試してみてください。

<div class="box"> 
    <img src="example.jpg"> 
</div> 

CSS：http://jsfiddle.net/LSKRy/

<div class="outer"> 
    <div class="inner"> 
    <img src="http://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" /> 
    </div> 
</div> 

.outer { 
    width: 300px; 
    overflow: hidden; 
} 

.inner { 
    display: inline-block; 
    position: relative; 
    right: -50%; 
} 

img { 
    position: relative; 
    left: -50%; 
} 

Answer 5

この例で、画像はその大きさ

HTMLに関係なく、要素の中心にあります：

div.box{ 
    width: 100px; 
    height: 100px 
    overflow: hidden; 
    text-align: center; 
} 

div.box > img{ 
    left: 50%; 
    margin-left: -100%; 
    position: relative; 
    width: auto !important; 
    height: 100px !important; 
}