CSS實作圖片等比例縮小不變形的實例分析-css教學-PHP中文網

首頁

web前端

css教學

CSS實作圖片等比例縮小不變形的實例分析

黄舟

Sep 30, 2017 am 09:28 AM

css

###

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS实现图片等比例缩小不变形</title>
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    </head>
    <style type="text/css">
        .wrap {
            width: 90%;
            height: 550px;
            border: 1px solid #000;
            margin: 50px auto;
        }
        ul {
            width: 100%;
            height: 100%;
        }
        ul li {
            overflow: hidden;
            float: left;
            width: 350px;
            height: 350px;
            border: 1px solid #aaa;
            margin: 90px 0 0 43px;
        }
        ul li img {
            /*等宽缩小不变形*/
            /*width: 100%;*/
            /*二选一*/
            /*等高缩小不变形*/
            height: 100%;
        }
    </style>
    <body>
        <p class="wrap">
            <ul>
                <li>
                    <img src="/static/imghwm/default1.png"  data-src="../images/bg1.jpg"  class="lazy"   alt="" />
                </li>
                <li>
                    <img src="/static/imghwm/default1.png"  data-src="../images/bg2.jpg"  class="lazy"   alt="" />
                </li>
                <li>
                    <img src="/static/imghwm/default1.png"  data-src="../images/bg3.jpg"  class="lazy"   alt="" />
                </li>
            </ul>
        </p>
    </body>
</html>

以上是CSS實作圖片等比例縮小不變形的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

兩個圖像和一個API：我們重新著色產品所需的一切Apr 15, 2025 am 11:27 AM

我最近找到了一種動態更新任何產品圖像的顏色的解決方案。因此，只有一種產品之一，我們可以以不同的方式對其進行著色以顯示

每周平台新聞：第三方代碼，被動混合內容，連接最慢的國家的影響Apr 15, 2025 am 11:19 AM

在本週的綜述中，燈塔在第三方腳本上闡明了燈光，不安全的資源將在安全站點上被阻止，許多國家連接速度

託管您自己的非JavaScript分析的選項Apr 15, 2025 am 11:09 AM

有很多分析平台可幫助您跟踪網站上的訪問者和使用數據。也許最著名的是Google Analytics（廣泛使用）

它全部都在頭上：管理帶有React頭盔的React Power Site的文檔頭Apr 15, 2025 am 11:01 AM

該文檔負責人可能不是網站上最迷人的部分，但是其中所處的內容對於您的網站的成功也一樣重要

JavaScript中的Super（）是什麼？Apr 15, 2025 am 10:59 AM

當您看到一些稱為super（）的JavaScript時，在子類中，您會使用super（）調用其父母的構造函數和超級。訪問它

比較不同類型的本機JavaScript彈出窗口Apr 15, 2025 am 10:48 AM

JavaScript具有各種內置彈出API，它們顯示用於用戶交互的特殊UI。著名：

為什麼可訪問的網站如此難以構建？Apr 15, 2025 am 10:45 AM

前幾天，我與一些前端人們聊天，講述了為什麼這麼多公司努力創建可訪問的網站。為什麼可訪問的網站如此艱難

'隱藏”屬性顯然很弱Apr 15, 2025 am 10:43 AM

有一個HTML屬性，它可以正是您認為應該做的：

See all articles

熱AI工具

熱工具

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），