CSS 流体图像问题

Question

我的网站背景反应灵敏，效果很好。但是我遇到了图片问题。无论分辨率如何，我都希望它们看起来“固定”在与背景相同的位置。示例将浏览器的大小从 990 像素 x 537 像素重新调整为 990 像素 x 270 像素，图像看起来就像从未移动过，因为宽度/高度会根据浏览器的分辨率扩展或收缩。

好消息，我发现 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 轴的位置。