马黑黑 发表于 2022-1-29 11:52

镁铝给你一片天

本帖最后由 加林森 于 2022-1-30 11:48 编辑 <br /><br /><style type="text/css">

.picMain {
        margin: auto;
        width: 720px;
        position: relative;
        background: linear-gradient(45deg, olive, green, silver, white, transparent);
        padding: 10px;
        box-shadow: 2px 2px 4px 1px rgba(0,0,0,.6);
        display: flex;
        flex-direction: row;
        gap: 8px;
}

.picBox { flex-grow: 2; cursor: pointer; }

.picMini {
        width: 150px;
        display: flex;
        flex-direction: column;
        gap: 8px;
}

.picBox img {
        width: 570px;
        height: 730px;
        object-fit: cover;
}

.picMini img {
        width: 120px;
        height: 140px;
        border-radius: 50%;
        opacity: .5;
        cursor: pointer;
}

.picMini img:hover { opacity: 1; border-radius: 0;}

</style>

<div class="picMain">
        <div class="picMini" id="picMini">
                <img id="img1" onclick="showpic('img1')" src="https://638183.freep.cn/638183/Pic/2022/1.jpg" alt="" />
                <img id="img2" onclick="showpic('img2')" src="https://638183.freep.cn/638183/Pic/2022/2.jpg" alt="" />
                <img id="img3" onclick="showpic('img3')" src="https://638183.freep.cn/638183/Pic/2022/3.jpg" alt="" />
                <img id="img4" onclick="showpic('img4')" src="https://638183.freep.cn/638183/Pic/2022/4.jpg" alt="" />
                <img id="img5" onclick="showpic('img5')" src="https://638183.freep.cn/638183/Pic/2022/5.jpg" alt="" />
        </div>
        <div id="picBox" class="picBox"><img id="imgShow" alt="" src="https://638183.freep.cn/638183/Pic/2022/5.jpg" /></div>
</div>
<audio id="auMusic" src="http://www.kumeiwp.com/sub/filestores/2022/01/16/1d0f33a9d673029b6150a68858c27ad3.mp3" autoplay="autoplay" loop="loop"></audio>
<script language="javascript">
var aud = document.getElementById('auMusic');
var imgSw = document.getElementById('imgShow');
function showpic(idx){ imgSw.src = document.getElementById(idx).src; }
imgSw.onclick = function() { aud.paused ? aud.play() : aud.pause(); }
</script>

马黑黑 发表于 2022-1-29 11:56

布局没有认真构思与斟酌、计算。主要目的是想测试 object-fit 属性的 cover 值对 img 的修饰效果。全贴代码如下：

<style type="text/css">

.picMain {
      margin: auto;
      width: 720px;
      position: relative;
      background: linear-gradient(45deg, olive, green, silver, white, transparent);
      padding: 10px;
      box-shadow: 2px 2px 4px 1px rgba(0,0,0,.6);
      display: flex;
      flex-direction: row;
      gap: 8px;
}

.picBox { flex-grow: 2; cursor: pointer; }

.picMini {
      width: 150px;
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.picBox img {
      width: 570px;
      height: 730px;
      object-fit: cover;
}

.picMini img {
      width: 120px;
      height: 140px;
      border-radius: 50%;
      opacity: .5;
      cursor: pointer;
}

.picMini img:hover { opacity: 1; border-radius: 0;}

</style>

<div class="picMain">
      <div class="picMini" id="picMini">
                <img id="img1" src="https://638183.freep.cn/638183/Pic/2022/1.jpg" alt="" />
                <img id="img2" src="https://638183.freep.cn/638183/Pic/2022/2.jpg" alt="" />
                <img id="img3" src="https://638183.freep.cn/638183/Pic/2022/3.jpg" alt="" />
                <img id="img4" src="https://638183.freep.cn/638183/Pic/2022/4.jpg" alt="" />
                <img id="img5" src="https://638183.freep.cn/638183/Pic/2022/5.jpg" alt="" />
      </div>
      <div id="picBox" class="picBox"><img id="imgShow" alt="" src="https://638183.freep.cn/638183/Pic/2022/5.jpg" /></div>
</div>
<audio id="auMusic" src="http://www.kumeiwp.com/sub/filestores/2022/01/16/1d0f33a9d673029b6150a68858c27ad3.mp3" autoplay="autoplay" loop="loop"></audio>
<script language="javascript">
var aud = document.getElementById('auMusic');
var imgSw = document.getElementById('imgShow');
function showpic(idx){ imgSw.src = document.getElementById(idx).src; }
imgSw.onclick = function() { aud.paused ? aud.play() : aud.pause(); }
</script>

马黑黑 发表于 2022-1-29 12:12

本帖最后由 马黑黑 于 2022-1-29 12:16 编辑 <br /><br /><p>如果用 object-fit 的 contain 值（父框600*700、子元素居中，图片设置成同父框尺寸）：<br>&nbsp;</p>

<div style="width:600px;height:700px;margin:auto;border:1px solid; text-align:center;"><img style="object-fit:contain; width:600px;height:700px;" src="https://638183.freep.cn/638183/Pic/2022/4.jpg" alt=""></div>

马黑黑 发表于 2022-1-29 12:17

原图：600*899

https://638183.freep.cn/638183/Pic/2022/4.jpg

小辣椒 发表于 2022-1-29 12:31

黑黑真厉害，这么多裁剪效果的图图，直接一个帖上{:4_178:}

马黑黑 发表于 2022-1-29 12:46

小辣椒 发表于 2022-1-29 12:31
黑黑真厉害，这么多裁剪效果的图图，直接一个帖上

镁铝还不够多{:4_170:}

加林森 发表于 2022-1-29 12:51

厉害厉害，老黑在玩中西合璧啊。{:5_117:}

小辣椒 发表于 2022-1-29 13:08

马黑黑 发表于 2022-1-29 12:46
镁铝还不够多

这个效果加个漂亮的播放器也是不错误的

红影 发表于 2022-1-29 13:22

这些图片可以一个个切换成大图的啊，真神奇{:4_187:}

红影 发表于 2022-1-29 13:26

这个帖子里用到的以前学的东西不少，有背景渐变，还有弹性布局等，现在还有新的object-fit 真棒{:4_187:}

红影 发表于 2022-1-29 13:29

通过和object-fit 的 contain 值，明显看得出cover是有裁剪的，好处是空间看着更完整，不会有留白。

马黑黑 发表于 2022-1-29 13:30

红影 发表于 2022-1-29 13:29
通过和object-fit 的 contain 值，明显看得出cover是有裁剪的，好处是空间看着更完整，不会有留白。

总结到位

马黑黑 发表于 2022-1-29 13:31

小辣椒 发表于 2022-1-29 13:08
这个效果加个漂亮的播放器也是不错误的

大图可以控制音乐

马黑黑 发表于 2022-1-29 13:31

加林森 发表于 2022-1-29 12:51
厉害厉害，老黑在玩中西合璧啊。

瞎玩玩

马黑黑 发表于 2022-1-29 13:31

红影 发表于 2022-1-29 13:26
这个帖子里用到的以前学的东西不少，有背景渐变，还有弹性布局等，现在还有新的object-fit 真棒

新内容不多

红影 发表于 2022-1-29 13:34

看到父容器没设置高度，是撑开多少算多少的吧。

加林森 发表于 2022-1-29 13:34

马黑黑 发表于 2022-1-29 13:31
瞎玩玩

挺好看的。

马黑黑 发表于 2022-1-29 13:38

加林森 发表于 2022-1-29 13:34
挺好看的。

一般般吧

马黑黑 发表于 2022-1-29 13:39

红影 发表于 2022-1-29 13:34
看到父容器没设置高度，是撑开多少算多少的吧。
右边图片的父框受到flex布局的影响，它是有高度的，会跟随左边放小图的元素的高度变化

加林森 发表于 2022-1-29 13:45

马黑黑 发表于 2022-1-29 13:38
一般般吧

比我的好得太多了。{:4_190:}
页: [1] 2 3
查看完整版本: 镁铝给你一片天