<nav id="chj2t"><big id="chj2t"><video id="chj2t"></video></big></nav>
  • <tbody id="chj2t"><pre id="chj2t"></pre></tbody>
    <li id="chj2t"><tr id="chj2t"><cite id="chj2t"></cite></tr></li>

      <em id="chj2t"></em>
      1. <rp id="chj2t"><object id="chj2t"></object></rp>
        <th id="chj2t"><pre id="chj2t"><sup id="chj2t"></sup></pre></th>

        一站式百度SEO排名優化!-找老劉博客 低投入,高轉化,精益求精、一絲不茍:旨在提供更好的SEO服務!

        首頁>>前端開發

        CSS3控制圖片自適應屏幕大小和居中顯示

        首頁 2023-05-31 前端開發 301 ℃Tags: css3 圖片居中


        小e說

        做網站之后,我們會在網站后臺發布很多新聞或文章。文章里會插入一些圖片,由于圖片尺寸不一樣,會出現圖片超過寬度的問題。特別是制作手機網站時,更容出現這種情況。如何通過CSS3來一次性控制網站所有圖片自適應大小呢?下面小e介紹一下CSS3控制圖片自適應屏幕大小的方法。


        image.png



        01



        圖片自動縮放

        只要將以下的CSS樣式代碼放到自己網站的CSS文件里即可。(如果不了解什么是CSS,請先學習一下網站建站常識)



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


        代碼解釋:代碼里的cont修改成自己的class名。通過控制圖片的最大寬度值為100%,高度隨寬度自動縮放,而不是直接控制圖片寬度,避免了圖片被壓縮變形。



        02




        圖片居中

        如果要讓網站圖片始終居中顯示,只需要加上以下的CSS樣式;

        圖片



        .cont img{display:block;margin:0 auto;}

        所以,CSS3控制圖片自適應屏幕大小和居中顯示的CSS樣式代碼就是將二者合并一起。如下:


        所以,CSS3控制圖片自適應屏幕大小和居中顯示的CSS樣式代碼就是將二者合并一起。如下:


        .cont img{display:block;margin:0 auto;max-width:100%;height:auto;}


        搜索
        分類
        熱門標簽
      2. 首頁
      3. 電話
      4. QQ
      5. ?
        聯系老劉手機
        1043025812
        聯系老劉微信
        掃描微信二維碼
        人妻精品动漫H|2021国产精品视频|亚洲国产天堂久久综合|凹凸国产熟女精品视频国语
        <nav id="chj2t"><big id="chj2t"><video id="chj2t"></video></big></nav>
      6. <tbody id="chj2t"><pre id="chj2t"></pre></tbody>
        <li id="chj2t"><tr id="chj2t"><cite id="chj2t"></cite></tr></li>

          <em id="chj2t"></em>
          1. <rp id="chj2t"><object id="chj2t"></object></rp>
            <th id="chj2t"><pre id="chj2t"><sup id="chj2t"></sup></pre></th>