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

Question

我正在 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>

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

Answer 1

您可以使用 css 的 margin 属性，或者我自己尝试过，自从我更改我的三个图像的宽度，它们出现在一条线上

编辑：@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>

Answer 2

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

Answer 3

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

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

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

How do I control the position and size of my images?

html

css

wordpress

position

wordpress.com