複雑なCSSイメージセンタリングヘルプ？

Question

私の問題は、タイトルよりも少し複雑です。申し訳ありませんが、具体的にする方法がわかりません...

私はウェブサイト上で作業していますが、サムネイルを表示する部分があります。サムネイルのサイズが一致していません。 （これはサムネイルがありますので、ばかばかしいと思います。）いいえ、同じ次元で作成する方法はありません。私はこの問題を解決するためにHTML + CSS構造を作成しました。画像がアスペクト比を維持しながら小さければ、コンテナに合わせて伸びません。

残りの唯一の問題は、画像を中央に配置することです。 "0 auto"または "auto 0"にマージンを設定することは役に立たないので、私は画像を配置するためにmultiple containers and setting the marginsを設定しようとしました。これも機能しません：120x80の内側のコンテナに120x120の画像を置き、コンテナの上下の余白を-50％に設定すると、余白は両方とも-60pxになります。これは修正できますか？それともイメージを中心にする別の方法がありますか？

私は任意の提案に開放されています！

HTML：

<div id="roll"> 
<div class="imgfix"> 
    <div class="outer"> 
     <div class="inner"> 
      @if (ImageDimensionHelper.WhereToAlignImg(item.Width, item.Height, 120, 82) == ImgAlign.Width) 

      <!-- ImageDimensionHelper tells me if the image should fit the 
      container with its width or height. I set the class of the img 
      accordingly. --> 

      { 
      <img class="width" src="@Url.Content(item.URL)" alt="@item.Name"/> 
      } 
      else 
      { 
      <img class="height" src="@Url.Content(item.URL)" alt="@item.Name"/> 
      }  
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.imgfix{ overflow:hidden; } 
.imgfix .outer { width:100%; height:100%;} 
.imgfix .inner { width:100%; height:100%; margin-top:-50%; margin-left:-50%; } 
/*This div (.inner) gets -60px for both margins every time, regardless of the size of itself, or the image inside it*/ 
#roll .imgfix { width:120px; height:82px; border: 1px #5b91ba solid; } 
#roll .imgfix .outer { margin-top:41px; margin-left:60px; } 
/*since I know specificly what these margins should be, I set them explicitly, because 50% got the wrong size.*/ 
#roll .imgfix img.width { width:120px; height:auto; margin: auto 0; } 
#roll .imgfix img.height { height:82px; width:auto; margin: 0 auto; } 

Answer 1

ミドル：div.inner要素、さらに垂直整列するテーブルセル：

、垂直配向のためには、表示を設定する必要があります。ただし、すべてのブラウザで動作するわけではありません。したがって、IE6/7をサポートする必要がある場合、これは正しい解決策ではありません。

編集：

私の問題は、もう少し複雑なタイトルよりも控えめな表現であること

言います！

私はだと思います。私はsomething workingですが、イメージのサイズによってはインラインスタイルを追加する必要があります。ほとんどのCSSは共有されていますので、中央に配置する画像がサムネイルのサイズ（この例では120x80px）より大きいか小さいかによって設定が必要なのはmargin-leftとmargin-topです。

私はあなたの質問から、サーバーサイドコードのイメージの大きさを知っているので、各イメージに必要なインラインスタイルを作成するロジックを一般化できるはずです。要約すると、私は完全にするために、任意のimg

img.stretchHorizontal { /* use when img width < 120px */ 
    width:100%; 
} 
img.stretchVertical { /* use when img height < 80px */ 
    height:100%; 
} 

残りのCSSのための1つの2の一般的なスタイルを使用しています：

その後

.outer { 
    width:120px; 
    height:80px; 
    border:1px #5b91ba solid; 
    overflow:hidden; 
    display:inline-block; /* not necessary, but nice for demo */ 
} 
.inner { 
    width:120px; 
    height:80px; 
} 
#roll { 
    margin:100px 0 0 100px; /* just to move everything down and left a bit */ 
} 

画像が.stretchHorizontalまたは.stretchVertical必要がある場合に応じて、追加計算margin-top、margin-leftまたはmargin-topとmargin-leftの両方です。一般的なルールがあるように見える：stretchVertical必要なしストレッチ（IMGが120x80より大きいない）場合stretchHorizo​​ntalがmargin-top:((scaled img height)/-2)+(inner height /2)

を追加した場合margin-left:(scaled img width/-2)+(inner width/2)

を投稿

• 場合margin-top:img height - 80/-2とmargin-left:(img width/-2)+(inner width/2)

demo例としていくつかの異なる画像サイズを使用しています。

<div id="roll"> 
    <div class="outer"> 
     <div class="inner" style="margin:-20px 0 0 0"> 
      <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/100 * 100 = 120)/-2)+ 40 = -20px --> 
      <img class="stretchHorizontal" src="viewport/yoda.jpg" alt=""/> <!-- 100x100 --> 
     </div> 
    </div> 
    <div class="outer"> 
     <div class="inner" style="margin:0 0 0 -100px"> 
      <!-- margin-left:(scaled img width/-2)+(inner width/2) so margin-left:((80/80 * 320 /-2)+60 = -160+60 = -100px--> 
      <img class="stretchVertical" src="viewport/galaxies.png" alt=""/> <!-- 320x80 --> 
     </div> 
    </div><br/> 
    <div class="outer"> 
     <div class="inner" style="margin:-20px 0 0 0"> 
      <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/120 * 120 = 120)/-2)+ 40 = -60 + 40 = -20px margin-left:(120/-2)+60 = 0--> 
      <img src="viewport/luke.jpg" alt=""/> <!-- 120x120 --> 
     </div> 
    </div> 
    <div class="outer"> 
     <div class="inner" style="margin:-160px 0 0 -190px"> 
      <!-- margin-top:img height - 80/-2 = -160px margin-left:(img width/-2)+(inner width/2) so margin-left:(500/-2)+60 = -190px--> 
      <img src="viewport/cookie_cutter.jpg" alt=""/> <!-- 500x400 --> 
     </div> 
    </div><br/> 
    <div class="outer"> 
     <div class="inner" style="margin:-20px 0 0 0"> 
      <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/50 * 50 = 120)/-2)+ 40 = -20px --> 
      <img class="stretchHorizontal" src="viewport/vadar.gif" alt=""/> <!-- 50x50 stretchVertical or stretchHorizontal does not matter for images smaller than both inner dimensions --> 
     </div> 
    </div> 
    <div class="outer"> 
     <div class="inner" style="margin:-50px 0 0 -65px"> 
      <!-- margin-top:img height - 80/-2 = -50px margin-left:(250/-2)+60=-65px --> 
      <img src="viewport/starwars.jpg" alt=""/> <!-- 250x180 --> 
     </div> 
    </div><br/> 
    <div class="outer"> 
     <div class="inner" style="margin:-50px 0 0 -30px"> 
      <!-- margin-top:img height - 80/-2 = -50px margin-left:(180/-2)+60=-30px--> 
      <img src="viewport/big_luke.jpg" alt=""/> <!-- 180x180 --> 
     </div> 
    </div> 
    <div class="outer"> 
     <div class="inner" style="margin:-200px 0 0 0"> 
      <!-- margin-top:scaled img height/-2+(inner height /2) so (120/50 * 200 = 480)/-2 = -240px + 40 = -200px--> 
      <img class="stretchHorizontal" src="viewport/bookmark.jpg" alt=""/> <!-- 50x200 --> 
     </div> 
    </div> 
</div> 

私はこれは完全にバグ自由さを疑うが、私はあなたのコードを表示してください

Answer 2

画像のインラインです。それらを表示するように設定します：margin：autoを使用するブロック、またはdiv.inner要素内のcenter-center：centerを使用します。私が正しくthis demoはあなたが欲しいものを行う必要があります理解していれば