Question

我正在尝试将图片浮动到页面右侧，并在大屏幕和中等屏幕中调整大小，但在小屏幕和Xtra小屏幕中消失。

我可以在bootstrap中使用hidden-sm和hidden-xs使图像消失，但我努力使图像（考虑到它如此之大）浮动到页面右侧，如附加无响应< / strong>图片。

我是否需要使用宽度：％来进行此移动？我试过这个，这在响应等方面效果不好。

Screenshot - non-responsive

图片的HTML：

 <div class="container-fluid"> <div class="row"> <div class="col-offset-md-9 col-md-3 hidden-sm hidden-xs"> <div class="BackgroundImage center-block img-responsive"><img src="Pictures/Profile.png" alt="Background Image"></div> </div> </div> </div>

这是迄今为止我所拥有的简单CSS：

/* Background Image/Neil Photo */ .BackgroundImage { width: 190px; } .BackgroundImage img { z-index: -1; margin-bottom: -366%; display: fixed; }

Answer 1

您必须使用“位置”而不是“显示”固定位置并制作如下样式：

.BackgroundImage {
    //width: 190px;
}

.BackgroundImage img {
    z-index: -1;
    position: fixed;
    top:0;
    right:0;
}

但是，您的网站中仍然存在其他两个问题，使其看起来没有响应能力：

您需要删除：

p { 
    width:110%; 
}

您需要删除：

footer { 
    margin-left:19%; 
}

Answer 2

使用vw单位代替%

vw设置元素相对于 viewport-width 的大小，无论其他什么。

例如：

.BackgroundImage img {
    z-index: -1;
    margin-bottom: -366%;
    width: 50vw;
    display: fixed;
}

您可以添加right: 0属性，将图片附加到位置参考的右侧。

.BackgroundImage img {
    z-index: -1;
    margin-bottom: -366%;
    width: 50vw;
    right: 0;
    display: fixed;
}

在这里阅读更多内容： http://www.w3schools.com/css/css_positioning.asp

并查看视口单元的兼容性： http://caniuse.com/#feat=viewport-units

Boostrap大图像 - 固定位置＆amp;响应

2 个答案: