CSS Fluid Image問題

Question

我的網站背景反應靈敏，效果很好。但是圖片有問題。 無論分辨率如何，我都希望它們看起來與背景處於“固定”位置。 將瀏覽器的大小從990px​​ x 537px調整為990px​​ x 270px的示例看起來像從未移動過，因為寬度/高度將根據瀏覽器的分辨率而擴大或縮小。

好消息是，我發現CSS使背景的寬度變得流暢！ 壞消息是，如果我將身高設為100％或14％，則身高看起來相同。 我需要確定自己的身高嗎？ 為什么不寬？ 怎么樣？

#block-imageblock-4{
    width:26%;
    height:14%;
     margin-top:7%;
     margin-bottom:1%;
    margin-left:37%;
    margin-right:36.5%;
        max-width:100%;
    max-height:100%;


}

所以我的問題是，如果我的分辨率很大或很小，如何在屏幕上的相同位置顯示圖像？ 請提供一個示例，而不僅僅是一個鏈接。 就像我說過的那樣，我想出了使圖像的寬度可變的方法，但並不是使高度變寬，但是如果您有更好的方法，請分享。

我正在使用Drupal構建我的站點供參考。

<---------------------------------------------編輯--- ------------------------------------->

這是我所談論的兩個例子。 請忽略所有圖像，但標記為IMAGE1的圖像。

Image1的CSS：

 #block-imageblock-4{
        width:26%;
        height:14%;
         margin-top:7%;
         margin-bottom:1%;
        margin-left:37%;
        margin-right:36.5%;
            max-width:100%;
        max-height:100%;


    }

第一張圖片瀏覽器分辨率：480px x 356px

第二張圖片-瀏覽器分辨率：520px x 630px

Answer 1

js小提琴中的代碼： JSfiddle

這是我使用CSS的方法：

html {
    background-color: black;
}

#master {
    position: relative;
}

#img {
    width: 23%;
    max-width: 120px;
    display: inline-block;
    background-color: red;
    position: absolute;
    bottom: 80%;
    height: 10%;
    max-height: 40px;
    margin-top: -80px;
    left: 50%;
    margin-left: -40px;
}

HTML：

<div id="master"> </div>
<div id="img"> </div>

您制作了一個外部div，即master將其設置為圖像本身的相對位置，並賦予了我提到的屬性，根據您擁有的圖像大小編輯寬度和高度，並編輯margin-top和margin-left以使其完全匹配到您想要的位置，一切都會順利進行，希望對您有所幫助。

以及編輯底部：X％； （X中的百分數）以編輯y軸上的位置。