javascriptで画像の高さと幅を同時に変更することはできませんか？

Question

私はdivに画像を持っており、常に画像を中央に揃えておきたい。

画像の幅が画面より広い場合は、画像をビューポートの幅に拡大します。また、画像がビューポートの高さよりも短い場合は、ビューポートの高さまで拡大します。

私のコードでは、幅を広げると自動的に高さが広がりますが、計算する必要はないのですばらしいです。高さも同じです。高さが拡張されると、幅は比例したままになります。

しかし、高さがビューポートよりも小さくなるように幅が変更された場合は、高さを確認してビューポートの高さに戻す必要がありますそれはしない）。同時に高さと幅の両方を変更する必要がある場合、自動プロポーショニングは機能しません。もし私が他人とやりとりするなら、それはうまくいく。

イメージを歪ませずに変更して動作させるにはどうすればよいですか？

私のコード：

inner_width = $(window).innerWidth(); 
inner_height = $(window).innerHeight(); 


if (inner_width < original_pic_width) { 
    $(pic).css({'width': original_pic_width}); 
} 
else { 
    $(pic).css({'width' : inner_width }); 
} 

if (inner_height < original_pic_height){ 
    $(pic).css({'height': original_pic_height}); 
} 
else { 
    $(pic).css({'height' : inner_height }); 
} 

Answer 1

あなたは高さと幅の両方を設定した場合は...両方の寸法、高さと幅が設定されます。

width =ビューポートの幅が横（幅>高さ）の場合はheight =ビューポートの高さ（縦の場合）を設定すると、1次元だけを設定すれば十分です。

Answer 2

変更する必要のあるディメンションを見つけて変更する必要があります。イメージの幅とウィンドウのinniderWidthの差と、イメージの高さとウィンドウのinnerHeightの差を確認することで、これを行うことができます。どんな違いが大きいかは、あなたが変更する必要があるものだけです。それは、両方のサイズを変更することなく、他の次元を処理する必要があります。

Answer 3

CSS containはかなりいいです。ここで

$("div").css({ 
 
    backgroundImage: "url(" + $("img").prop('src') + ")", 
 
    backgroundSize:"contain", 
 
    backgroundRepeat: "no-repeat" 
 
});

div { width:200px; height:200px; border:1px solid red;} 
 
div img { display:none }

<div> 
 
    <img src="http://www.somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg"/> 
 
</div> 
 

 

 
<script src="https://code.jquery.com/jquery-2.2.3.min.js" 
 
     integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" 
 
     crossorigin="anonymous"></script>

Answer 4

可能な解決策（あなたがが欲しいものを明確に理解することは確実ではない）です。私は、センタリング方法がクロスブラウザであることを絶対に確信していないことに注意してください。

var div = $("div"); 
 
var img = $("img"); 
 
var imgw = img.width(); 
 
var imgh = img.height(); 
 
var imgr = imgw/imgh; 
 
var sizes = [300, 120]; 
 
var i = 0; 
 

 
setInterval(function() { 
 
    div.width(sizes[i]); 
 
    i = (i + 1) % 2; 
 
    adjust(); 
 
}, 1000); 
 

 
function adjust() { 
 
    var divw = div.width(); 
 
    var divh = div.height(); 
 
    var divr = divw/divh; 
 
    if (divr < imgr) { 
 
    img.width("100%"); 
 
    img.height("auto"); 
 
    } else { 
 
    img.width("auto"); 
 
    img.height("100%"); 
 
    } 
 
}

div { 
 
    position: relative; 
 
} 
 

 
img { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    right: 0; left: 0; 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width:120px;height:120px;border:10px solid #5900CC;"> 
 
    <img style="width:100%;" src="http://i.stack.imgur.com/jKXi2.jpg" /> 
 
</div>