画像を拡大して拡大する必要がある場合でも、サイズに合わせて画像を拡大します。

Question

私のウェブページには、私が特徴的ないくつかの画像を持つ動的コンテンツがあります。大画面では、画像がページの右側に浮かびます。小さな画面では、画像をブロックとして扱い、画面の幅を画面の100％に設定します。

ほとんどの画像ではうまくいきましたが、画像が実際に高すぎるため、画像が画面幅の100％の小さな画面では難しくなり、過去にはスクロールしなければならない場合があります画像。

画像の最大高さを設定し、空白を埋める幅の100％である最初の画像の背後にあるぼんやりした画像のコピーを持つようにするためです。 （1つの解像度で放送し、異なる解像度のビデオを表示するときにテレビ局が行うような種類のもの）。

画像が100％幅か最大高さまでできるだけ大きくなるようにしたい場合を除いて、うまくいきます。小さな画像の場合、実際の画像の大きさと同じくらい大きくなります。

figure{position:relative;overflow:hidden;float:right;width:202px;margin:0 0 0.5rem 0.5rem;font-size:0;text-align:center} 
figure img{margin:auto;max-width:100%;max-height:400px;width:auto;height:auto;display:block;border:0} 
figure span{display:block;position:absolute;z-index:-1;filter:blur(10px);-ms-filter:blur(10px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');top:-10px;left:-10px;padding:10px;width:100%;height:100%} 
figcaption{text-align:left;background:#fff;font-size:0.75rem} 

@media(max-width:528px){ 
figure{float:none;margin:0 auto;width:100%} 
figure img{max-height:300px}} 

<figure> 
<a href="#"><img src="dynamicPic.jpg"> 
<span style="background:url(dynamicPic.jpg) no-repeat center;background-size:cover"></span> 
</a> 
<figcaption>Dynamic Caption</figcaption> 
</figure> 

Answer 1

私はJavaScriptを少しトリック

var img = document.getElementById("image-id-here"); 
img.onload = function(){ 
    var maxWidth = (document.body.clientHeight/img.height) * img.width; 
    var maxHeight = (document.body.clientWidth/img.width) * img.height; 
    if(maxWidth > document.body.clientWidth){ 
     img.width = img.width * (maxHeight/img.height); 
     img.height = maxHeight; 
    }else{ 
     img.width = maxWidth 
     img.height = img.height * (maxWidth/img.width); 
    } 
} 

これが最大サイズに画像のサイズを変更するが、それでも縦横比を維持しなければならない操作を行うことができると思います。

重要：イメージタグがロードされた後、上記のコードを実行する必要があります。