Question

我已经在我的网站主页上放置了一个图像，但是我想移动图像的位置而不是操纵图像的像素。我确定它与填充或边距有关，但是我不确定如何将它实现到我的程序中。这是我的代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheetMain.css">

<title> Main Page </title>

</head>

<body>

<!-- This is the image I want to move around! -->
<img src="blake.jpg" alt="Mountain View" style="width:141px;height:114px;">


<div class="link1" onclick="location.href='';" style="cursor: pointer;">
</div>
<div class="link2" onclick="location.href='ImagePage.html';" style="cursor: pointer;">
</div>
<div class="link3" onclick="location.href='gamequiz.html';" style="cursor: pointer;">
</div>
<div class="link4" onclick="location.href='orderform.html';" style="cursor: pointer;">
</div>
<div class="link5" onclick="location.href='comments.html';" style="cursor: pointer;">
</div>

<div class="link6" onclick="location.href='';" style="cursor: pointer;"><br><br><br>
Author: Michael Cattermole
</div>


</body>

</html>

Answer 1

如果位置是相对位置，固定位置或绝对位置，则只能设置组件的位置。如果这样做，您可以将样式中的左侧和顶部设置为值。例如：

<img src="blake.jpg" alt="Mountain View" style="width:141px;height:114px; position:absolute; left:200; top:500;">

Answer 2

我想你想在一个较小的容器里只能看到一部分图像。因此，代码中的图像将为141 x 114像素，但您希望在100x100px的帧内以原始大小显示其中的一部分。这是你想要的吗？

如果是，您可以使用负margin - 值来实现此目的。但是，您还需要一个容器，其中包含（遮罩）图像的剪切部分并使其余部分不可见。所以你会有这样的事情：

<div style="style="position: relative;width:100px;height:100px;overflow: hidden;">
  <img src="blake.jpg" alt="Mountain View" style="position: relative;width:141px;height:114px;margin-top:-20px;margin-left:-7px;">
</div>

但是，如果您使用类，那么处理起来要容易得多，例如：

<style type="text/css">
  .x {
    position: relative;
    width:100px;
    height:100px;
    overflow: hidden;
  }
  .x img {
    position: relative;
    width:141px;
    height:114px;
    margin-top:-20px;
    margin-left:-7px;
  }
</style>

<div class="x">
  <img src="blake.jpg" alt="Mountain View">
</div>

Answer 3

这是一种方式...... 将img包装成一个像这样的div ...

<div class="relP">
  <img src="blake.jpg" alt="Mountain View">
</div>

然后在你的CSS中包括这个......

.relP{
  position: relative;
}

.relP img{
  position: absolute;
  left: 50px;
  top: 50px;
  height: 114px;
  width: 141px;
}

您的图片现已绝对定位。通过调整“顶部”和“左”数字，您可以更改图像在页面上的位置。您也可以通过设置.relP img来水平居中图像......

.relP img{
  position: absolute;
  left: 0;
  right: 0;
  margin:0 auto;
  height: 114px;
  width: 141px;
}

希望这有帮助！

如何移动图像的位置？

3 个答案: