如何移动我的图像's的位置

How do I move my image's position?

本文关键字：位置 图像 我的 何移动 移动      更新时间：2023-12-12

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

<!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>

只有当组件的位置是相对的、固定的或绝对的时，才能设置组件的位置。如果执行了此操作，则可以将样式中的"左"answers"上"设置为某个值。例如：

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

我想您只想在较小的容器中看到图像的一部分。因此，代码中的图像将是141 x 114 px，但您希望在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>

这里有一种方法。。。将img包装在div中，如so…

<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;
}

你的形象现在已经完全定位了。通过调整"顶部"answers"左侧"数字，您可以更改图像在页面上的位置。你也可以通过设置.relP-img使图像水平居中…

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

希望这能有所帮助！

相关文章：