html - CSS 流体图像问题

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


    }

第一张图片 - 浏览器分辨率:480 像素 x 356 像素

第二张图片 - 浏览器分辨率:520 像素 x 630 像素

Answer 1

js fiddle中的代码: 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 ie master 将它设置到相对位置图像本身你给了我提到的属性根据你有的图像大小编辑宽度和高度，并编辑 margin-top 和 margin-left 以偏移它以使其完全适合你想要的位置，并且它都会流畅地工作，希望对您有所帮助。

以及编辑底部:X%； (X 中的百分比数字)以编辑 y 轴中的位置。