photosWide 小白实例demo 实现图片在移动端和PC端缩放 可直接替换使用

本文提供了一个名为photosWide的小白实例DEMO,该示例详细展示了如何实现图片在移动端和PC端自动缩放,以达到良好的适配效果。读者可以直接将此方案应用于自己的项目中。
摘要由CSDN通过智能技术生成

photoswide
在这里插入图片描述
帮你们打包蓝奏云:
Dijia

<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#" debug="true"
      class="wf-myriadpro-n4-active wf-myriadpro-n6-active wf-active">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Dijah,ティガ</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0">
    <meta name="author" content="Dijah">
</head>
<body>

<!--自定义图片 Dijia/1.jpg-->
<div class="section section--head">
    <!--自定义图片 Dijia/1.jpg-->
    <div class="row">
        <div id="demo-test-gallery" class="demo-gallery" data-pswp-uid="1">

            <a href="Dijia/1.jpg"
               data-size="1600x1600" data-med="Dijia/1.jpg"
               data-med-size="1024x1024"
               class="Dijia/1.jpg">
                <img src="Dijia/1.jpg" alt="">
                <figure></figure>

            </a><a href="Dijia/2.jpg"
                   data-size="1600x1600" data-med="Dijia/2.jpg"
                   data-med-size="1024x1024"
                   class="Dijia/2.jpg">
            <img src="Dijia/2.jpg" alt="">
            <figure></figure>
        </a>
        </div>
    </div>
</div>


<!--各种属性和链接可不看-->
<div>
    <link href="./Dijia/site.css" rel="stylesheet">
    <link href="./Dijia/photoswipe.css" rel="stylesheet">
    <link href="./Dijia/default-skin.css" rel="stylesheet">
    <script type="text/javascript" async=""
            src="./Dijia/watch.js"></script>
    <script async="" src="./Dijia/analytics.js"></script>
    <script src="./Dijia/photoswipe.min.js"></script>
    <script src="./Dijia/photoswipe-ui-default.min.js"></script>
    <script src="Dijia/snf1yod.js"></script>
    <style type="text/css">.tk-myriad-pro {
    
        font-family: "myriad-pro", sans-serif;
    }</style>
    <style type="text/css">@font-face {
    
        font-family: myriad-pro;
        src: url(https://use.typekit.net/af/9bffeb/0000000000000000000151e0/23/l?subset_id=2&fvd=n4&v=3) format("woff2"), url(https://use.typekit.net/af/9bffeb/0000000000000000000151e0/23/d?subset_id=2&fvd=n4&v=3) format("woff"), url(https://use.typekit.net/af/9bffeb/0000000000000000000151e0/23/a?subset_id=2&fvd=n4&v=3) format("opentype");
        font-weight: 400;
        font-style: normal;
        font-display: auto;
    }
    @font-face {
    
        font-family: myriad-pro;
        src: url(https://use.typekit.net/af/5e21d4/0000000000000000000151e1/23/l?subset_id=2&fvd=n6&v=3) format("woff2"), url(https://use.typekit.net/af/5e21d4/0000000000000000000151e1/23/d?subset_id=2&fvd=n6&v=3) format("woff"), url(https://use.typekit.net/af/5e21d4/0000000000000000000151e1/23/a?subset_id=2&fvd=n6&v=3) format("opentype");
        font-weight: 600;
        font-style: normal;
        font-display: auto;
    }</style>
    <script>
        $(function () {
    
            $('.pswp__img').css("width", "34%").css("height", "86%");

        })
        try {
    
            Typekit.load();
        } catch (e) {
    
        }</script>
    <script>
        document.createElement('figure');
    </script>
    <style type="text/css">
        input[type="text"],
        input[type="email"] {
    
            font-size: 18px;
            line-height: 25px;
            height: 32px;
            width: 250px;
            border: 1px #d0d0d0 solid;
            margin: 0 0 10px 0;
            padding: 4px;
        }

        
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值