ホームページ > 記事 > ウェブフロントエンド > HTMLの画像サイズ変更問題の解決策
サードパーティのインターフェースから写真を取得しました。ページに画像を埋め込んだところ、画像が大きすぎることがわかりました。 div のサイズを直接変更しても機能しません。画像は同じサイズのままです。画像の表示サイズを調整する方法はありますか?
画像は動的に取得されるため、ページを更新すると新しい画像が取得されます。したがって、画像を再トリミングしても問題は解決されません。
HTMLのソースコードは次のとおりです
<div class="row"> <div class="col-md-4"> <div class="panel panel-primary"> <img src="http://abc.jpeg"></img> </div> </div> <div class="col-md-4"> <div class="panel panel-primary"> <img src="http://abc.jpeg"></img> </div> </div> <div class="col-md-4"> <div class="panel panel-primary"> <img src="http://abc.jpeg"></img> </div> </div> </div>
それでも問題を解決できない場合は、ブートストラップの画像自動応答クラスを試すことができます
<img class="img-responsive" src="http://abc.jpeg" />
。上記のメソッドを入力して幅と高さを追加して制限するだけです。 it
<img style="width=100px; height=100px" src="http://abc.jpeg" />
css を書きます
.panel img{ width:你期望的宽; height:你期望的高}
div のサイズではなく、img タグのサイズを調整する必要があります。
他人の写真を取得している場合、写真の長さと幅が確認されていないことを意味し、サイズも不明です。imgを使用して長さと幅を制限すると、問題が発生します。
最善の方法は、
rree しながら .panel の長さと幅を調整することです以上がHTMLの画像サイズ変更問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。