一侧的照片边框宽度问题

Question

I would like to frame the picture in this way, but I do not know what is wrong with the code, that the bottom part of the border is thicker than the top (red border) link to the view [1]: https://i.stack.imgur.com/quFZn.jpg我想以这种方式构图，但我不知道代码有什么问题，边框的底部比顶部（红色边框）厚链接到视图[1]： https：/ /i.stack.imgur.com/quFZn.jpg

Code:代码：

  .image {
        flex: 1 1 40rem;
        position: relative;

        &::before,
        &::after {
            content: '';
            position: absolute;
            z-index: -1;
            background: $red;
            height: 25rem;
            width: 25rem;
        }

        &::before {
            top: 0;
            left: 0;
        }

        &::after {
            bottom: 0;
            right: 0;
        }

        img {
            width: 100%;
            padding: .5rem;
        }
    }

Answer 1

the idea here is two create two divs and put the them behind the image (responsively using position)这里的想法是两个创建两个 div 并将它们放在图像后面（响应地使用位置）

just change the --outside-value var for creating bigger border or smaller只需更改--outside-value var 以创建更大或更小的边框

with the var in * selector is equal in all two borders:) var in * 选择器在所有两个边框中都相等:)

hope this helps, good coding!希望这会有所帮助，良好的编码！

here the code这里的代码

 * { --outside-value: -0.2em; } html, body { height: 100%; } body, #content { display: flex; justify-content: center; align-items: center; } #content { position: relative; } #content img { width: 50vw; z-index: 1; }.border { width: 30vw; height: 10vh; position: absolute; background-color: red; }.border-bottom { top: var(--outside-value); left: var(--outside-value); }.border-top { position: absolute; bottom: var(--outside-value); right: var(--outside-value); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style:css"> </head> <body> <div id="content"> <div class="border border-top"></div> <img src="https.//laaouatni.github.io/w11-clone/images/1dark.jpg"> <div class="border border-bottom"></div> </div> </body> </html>

一侧的照片边框宽度问题

问题描述

1 个解决方案

解决方案1
0 2021-12-24 22:23:55

here the code这里的代码

一侧的照片边框宽度问题

问题描述

1 个解决方案

解决方案1 0 2021-12-24 22:23:55

here the code这里的代码

解决方案1
0 2021-12-24 22:23:55