如何控制图像的位置和大小？

问题描述

我正在 wordpress.com 上创建一个网站，我想弄清楚如何控制图片的放置位置？目前我只能将一张图片放在另一个下面或上面，它看起来很乱。有没有办法使用 html 或 CSS 控制坐标？最好是 html，因为我想要不同图像的不同位置。

这是到目前为止我的图像的代码：

    .container {
      position: relative;
      width: 400px;
    }
    
    .image {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #008CBA;
    }
    
    .container:hover .overlay {
      opacity: 1;
    }
    
    .projeto01 {
      color: white;
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      text-align: center;
    }

    <div class="grid-portefolio">
    
    <div class="container">
    
    <a href="https://en.wikipedia.org/wiki/Main\_Page"><img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" class="image" alt="Albert Lee Banks Electorate"/><div class="overlay"><div class="projeto01">Albert Lee<br>Banks Electorate</div></div></a>
    
    
    </div>

另请注意，我是编程初学者。上面的代码是我在网上找到的模板和朋友的一些帮助的混合。

解决方法

您可以使用 css 的 margin 属性，或者我自己尝试过，可能还有其他一些 css 代码与您的代码重叠，因为当我更改三张图像的宽度时，它们出现在一行上

编辑：@MrMcGoofy，示例代码为：

<!DOCTYPE html>
<html style="background: black;" lang="en-US"><head>
    <title>TITLE</title>
    <style>
        #one{
            /*Add the css you want,but this one wouldn't need margin*/
        }
        #two{
            margin-bottom: /*Play around with the value until you get the desired result,also try to change the margin-bottom to margin-top/left/right*/;
        }
        #three{
            margin-bottom: /*Play around with the value until you get the desired result,also try to change the margin-bottom to margin-top/left/right*/;
        }
    </style>
</head>
<body>
    <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" alt="1.jpg" width="40%" id="one">
    <img src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706__340.jpg" alt="2.jpg" width="40%" id="two">
    <img src="https://cdn.pixabay.com/photo/2015/10/12/14/59/milky-way-984050__340.jpg" alt="3.jpg" width="40%" id="three">
</body>
</html>

尽量在你的图片标签中使用 position:absolute;然后使用 top 和 left；例如给 top:50px;左：100px；看看会发生什么，玩这个……祝你好运你可以检查这个看看我来自哪里： https://css-tricks.com/absolute-positioning-inside-relative-positioning/

关于大小，它与 width 和 height 属性以及位置有关。我认为这取决于您的网站布局，但您也可以使用 top、right、left强>、bottom。

希望我对你有足够的帮助。

html position position wordpress wordpress wordpress.com

如何控制图像的位置和大小？

问题描述

解决方法

相关问答