画像を四角形のdivに整える画像のサイズを調整する

Question

私のアプリケーションでは、画像を所定のサイズの四角形のdivに挿入する必要があり、その部分を切り取らずに完全に表示します。現時点では、画像が縦（高さ>幅）の場合、高さを100％に設定し、横幅をauto（幅>高さ）に設定すると、幅を100％に設定し、高さをjavascriptコードに設定しています。自動

http://jsfiddle.net/z7L6m2sc/583/

はこれが（私はRailsアプリケーションを開発していますので、それはERBとコーヒーでだ、と私はなぜ知らないが、画像は内部中央にされていない私は自分のコードを再現してみましたリンクですDIV（自分のアプリケーションでこのコードは素晴らしい作品！）

は、これはレール

ERBで私のコードです

<div class="img"> 
    <% if i.insertion_images.length > 0 %> 
    <%= image_tag(i.insertion_images[i.first_img].image.url(:medium), class: 'last_img')%> 
    <% end %> 
</div> 

これはコーヒー

$('.last_img').on 'load', -> 
     natHeight = $(this).get(0).naturalHeight 
     natWidth = $(this).get(0).naturalWidth 
     if (natWidth > natHeight) 
     $(this).css('width','100%') 
     $(this).css('height','auto') 
     else #if (natWidth < natHeight) 
     $(this).css('height','100%') 
     $(this).css('width','auto') 

であり、これは私が私のレイアウトのためにフレックス使い始めましたので、私の質問があり、フレックスで、この動作を実現することが可能であるSCSS

img { 
     width: 200px; 
     height: 200px; 
     overflow: hidden; 
     position: relative; 
     last_img { 
     position: absolute; 
     top: -9999px; 
     bottom: -9999px; 
     left: -9999px; 
     right: -9999px; 
     margin: auto; 
     } 
    } 

です成分？あなたが背景として画像を設定する気にしない場合は多分、すべてのJSコードとCSSで-9999

おかげ

Answer 1

あなたは.image-resizeにmax-height: 100%とmax-width: 100%を使用することができ、そして私はそれはあなたが後にしている結果を与えるだろうと考えています。安全にしたい場合は、width: autoとheight: autoを追加することもできます。

.img-container{ 
 
    height: 300px; 
 
    width: 300px; 
 
    overflow: hidden; 
 
    background:red; 
 
    position: relative; 
 
} 
 

 
.image-resize { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    height: auto; 
 
    width: auto; 
 
}

<div class="img-container"> 
 
    <img src="http://s.hswstatic.com/gif/landscape-photography-1.jpg" class="image-resize"/> 
 
</div> 
 
<hr> 
 
<div class="img-container"> 
 
    <img src="https://i.pinimg.com/736x/05/1c/11/051c110d463b1c4afb11ca003a6237a3--nice-girl-beautiful-body.jpg" class="image-resize"/> 
 
</div>

Answer 2

せずにあなたは、この使用してCSSを行うことができます。

.bg-image{ 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: red; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    display: inline-block; 
 
}

<div class="bg-image img-1" style="background-image: url(http://s.hswstatic.com/gif/landscape-photography-1.jpg)"></div> 
 
<div class="bg-image img-2" style="background-image: url(https://i.pinimg.com/736x/05/1c/11/051c110d463b1c4afb11ca003a6237a3--nice-girl-beautiful-body.jpg)" ></div>