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

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

大余網站建設公司創新互聯,大余網站設計制作，有大型網站制作公司豐富經驗。已為大余成百上千提供企業網站建設服務。企業網站搭建\外貿網站建設要多少錢，請找那個售后服務好的大余做網站的公司定做！

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

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

單個圖片縮放

圖片在盒子內縮放

裸圖片的縮放

<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如何讓圖片隨屏幕變化大小

圖片在一個盒子內

<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% 結合前面 auto就可以了 */
  }
</style>
<body>
  <div id="box">
    <img src="/upload/otherpic66/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" />
    下面的文字
  </div>
</body>

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