css如何讓圖片隨屏幕變化大小

這篇文章主要介紹css如何讓圖片隨屏幕變化大小，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

大余網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),大余網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為大余成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的大余做網(wǎng)站的公司定做！

css讓圖片隨屏幕變化大小的方法：1、利用“width height auto”屬性來縮放圖片；2、利用“max-width max-height”屬性來設(shè)置最大寬高。

有時我們希望圖片能隨屏幕大小的縮放而縮放，兩種情況：

  • 單個圖片縮放

  • 圖片在盒子內(nèi)縮放

裸圖片的縮放

<style type="text/css">
  img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
</style>
<body>
  <img src="/upload/otherpic66/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" />
</body>

css如何讓圖片隨屏幕變化大小

圖片在一個盒子內(nèi)

<style type="text/css">
  #box {
    width: auto;  /* 盒子也要自動縮放 */
    height: auto; 
    max-width: 600px;
    max-height: 500px; /* 盒子的高度,需要大于圖片100%寬度時 圖片的高度 */
    border: 5px solid yellow;
  }
  img {
    width: auto;
    height: auto;
    max-width: 100%; /* 只要寬度100% 結(jié)合前面 auto就可以了 */
  }
</style>
<body>
  <div id="box">
    <img src="/upload/otherpic66/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" />
    下面的文字
  </div>
</body>

css如何讓圖片隨屏幕變化大小

ps:

1 、利用width height auto 來縮放

2、利用max-width max-height 來設(shè)置最大寬高，為100%表示可原始最大。

以上是“css如何讓圖片隨屏幕變化大小”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：css如何讓圖片隨屏幕變化大小
URL地址：http://www.muchs.cn/article2/jpjpoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、全網(wǎng)營銷推廣、、ChatGPT、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站