画像の幅を小さくする方法

Question

画面の幅が狭くなると、このセクションにある画像のサイズを変更する方法を知りたいと思います。画像は視差効果の一部ですが、背景ではなく、スクロールしているものです（通常はテキストとして検出されます）。

<div class="bgimg-1 w3-display-container" id="home"> 
    <div class="w3-display-middle" style="white-space:nowrap;"> 
    <img src="logo3.png" alt="Logo" style="width:1000px;height:750px;"> 
    </div> 
</div> 

私はスタイルで寸法を固定しますが、必要なときに、よりそれを削減する必要があります。全体のコードの開始時に は、そのセクションの前に、私が利用可能なオプションは、小さい幅のためにラスタースクロールをオフさ

@media only screen and (max-device-width: 1024px) { 
.bgimg-1, .bgimg-2, .bgimg-3 { 
    background-attachment: scroll; 
} 
} 

です。この部分で見つかったイメージへの参照は背景イメージです。サイズを変更する必要はありません。 前述のセクション（背景ではありません）でイメージのサイズを変更するにはどうすればよいですか？

Answer 1

ブートストラップ、マテリアライズ、またはその他の反応性の高いCSSテンプレートを使用している場合は、画像を元の解像度にしてタグを応答可能なコンテナに置きます。ブートストラップでは、各ビューが12列に分割されており、次のようになります。

<div class="row"> 
    <div class="col-sm-6 col-offset-3"> 
     <img src="logo3.png" alt="Logo" /> 
    </div> 
</div> 

これと異なるものが必要な場合はお知らせください。