Question

我的网站背景响应迅速，效果很好。但我对图片有疑问。我希望他们看起来＆＃34;固定＆＃34;与背景相同的位置，无论分辨率如何。示例将浏览器从990px到537px重新调整为990px到270px图像看起来好像从未移动过，因为宽度/高度会根据浏览器的分辨率扩展或收缩。

好消息我认为CSS可以使图像的WIDTH与背景一起流畅！坏消息是，如果我将高度设为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构建我的网站FYI。

＆LT; --------------------------------------------- EDIT ----------------------------------------＆GT;

以下是我所谈论的两个例子。 请忽略所有图片，但图片标记为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像素×356像素

enter image description here

第二个图像 - 浏览器分辨率：520px×630px enter image description here

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，即主人将它设置为相对位置您提供的图像本身我提到的属性根据您拥有的图像大小编辑宽度和高度，并编辑margin-top和margin-left以使其偏移以使其完全符合您希望的位置，并且它将全部流畅地工作希望有所帮助。

以及编辑底部：X％; （在X中的百分比数）来编辑y轴上的位置。

CSS Fluid Image问题

1 个答案: