ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLの画像サイズ変更問題の解決策

HTMLの画像サイズ変更問題の解決策

黄舟
リリース: 2017-07-26 13:33:12
オリジナル
4160 人が閲覧しました

サードパーティのインターフェースから写真を取得しました。ページに画像を埋め込んだところ、画像が大きすぎることがわかりました。 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート