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 轴中的位置。