如何移動圖片的位置？

我在我的網站主頁上放置了一個圖像，但是我想要移動圖像的位置而不是操縱圖像的像素。我確定它與填充或邊距有關，但我不確定如何將其實施到我的程序中。這是我的代碼：如何移動圖片的位置？

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

來源

2016-04-02 toadflax

「移動」如何？在我們能夠幫助您之前，您需要添加更多信息。 – Josiah

我確定這很清楚這意味着什麼，例如，如果我有一個圖像在某個位置，並想稍微向上，向下，向左或向右移動它。 – toadflax

Err ...「這是我想要移動的圖像！」 – Josiah

如果位置是相對的，固定的或絕對的，您只能設置組件的位置。如果你這樣做了，你可以將樣式中的Left和Top設置爲一個值。例如：

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

來源

2016-04-02 22:02:06 Stefan

出於某種原因，這是行不通的。 – toadflax

能夠修復它，因爲你有'頂部'和'左'翻轉，因爲這似乎工作正常' Mountain View '。謝謝！ – toadflax

我想你想有隻圖像較小的容器內可見的一部分。因此，代碼中的圖像應爲141 x 114像素，但您希望在100x100像素的幀內以原始尺寸顯示該圖像的一部分。那是你想要的嗎？

如果是，則可以使用負值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>

來源

2016-04-02 22:45:57 Johannes

這裏有一種方法...... 包在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; 
}

希望這有助於！

來源

2016-04-02 23:49:02 solid90

如何移動圖片的位置？

回答

相關問題