明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

html中圖片調(diào)整大小問題處理方法

發(fā)表時間：2023-12-30 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]我從一個第三方接口獲取了一張圖片。當(dāng)我把圖片嵌入到我的頁面的時候，發(fā)現(xiàn)圖片太大了。 直接調(diào)整div大小不起作用，圖片還是那么大。請問有什么辦法可以調(diào)整圖片顯示的大小嗎？圖片是動態(tài)獲取的，也就是說刷新一下頁面就會獲取一張新的圖片。所以重新裁圖片解決不了問題。html源碼如下<div class...
我從一個第三方接口獲取了一張圖片。當(dāng)我把圖片嵌入到我的頁面的時候，發(fā)現(xiàn)圖片太大了。 直接調(diào)整div大小不起作用，圖片還是那么大。請問有什么辦法可以調(diào)整圖片顯示的大小嗎？

圖片是動態(tài)獲取的，也就是說刷新一下頁面就會獲取一張新的圖片。所以重新裁圖片解決不了問題。

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>

你可以在試一試bootstrap的圖片自響應(yīng)類 

<img class="img-responsive" src="http://abc.jpeg" />

，如果還解決不了的話，就只能入樓上所說，加width跟height限定了

<img style="width=100px; height=100px" src="http://abc.jpeg" />

css里面寫

 .panel img{ width:你期望的寬; height:你期望的高}

你不應(yīng)該調(diào)div的大小，而是調(diào)img標(biāo)簽的大小才對。

如果是獲取人家的圖片，那說明圖片的長寬都不確認(rèn)，大小也不確定，如果采用img限定長寬，你會踩坑的。

最好的方法是調(diào)整.panel的長寬，同時

.panel img{max-width:100%;max-height:100%;}

以上就是html中圖片調(diào)整大小問題解決辦法的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。