html中圖片調整大小問題處理方法
發表時間:2024-05-11 來源:明輝站整理相關軟件相關文章人氣:
[摘要]我從一個第三方接口獲取了一張圖片。當我把圖片嵌入到我的頁面的時候,發現圖片太大了。 直接調整div大小不起作用,圖片還是那么大。請問有什么辦法可以調整圖片顯示的大小嗎?圖片是動態獲取的,也就是說刷新一下頁面就會獲取一張新的圖片。所以重新裁圖片解決不了問題。html源碼如下<div class...
我從一個第三方接口獲取了一張圖片。當我把圖片嵌入到我的頁面的時候,發現圖片太大了。 直接調整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>
你可以在試一試bootstrap的圖片自響應類
<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:你期望的高}
你不應該調div的大小,而是調img標簽的大小才對。
如果是獲取人家的圖片,那說明圖片的長寬都不確認,大小也不確定,如果采用img限定長寬,你會踩坑的。
最好的方法是調整.panel的長寬,同時
.panel img{max-width:100%;max-height:100%;}
以上就是html中圖片調整大小問題解決辦法的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。