Question

我想用关闭按钮创建响应式弹出式横幅这是我的简单场景：

<div class="banner">
    <img src="...">
    <a href="" class="close-btn">X</a>
</div>

我的CSS：

.banner img{
    max-width:100%;
    max-height:100%;
    position:absolute;
}
.close-btn{
    position:absolute;
    right:0;
    z-index:2;
    color:red;
    background:#000;
    padding:4px;
}

正如您所见，我根据宽度和高度拉伸图像。

问题：我希望close-btn坚持图像的右侧并重叠它。要解决此问题，banner必须与图像的宽度相同。如果banner的{{1}}宽度和高度当然为0.

是否可以仅使用CSS实现？

这是小提琴：http://jsfiddle.net/fjckls/qq590xz5/

我需要图像响应宽度和高度

I need image to be responsive to **width and height**

Answer 1

要使图像完全响应宽度和高度，首先，您需要更改单位。你现在正在使用%这一切都很好，但对于“全高度响应”概念，％单位没有多大帮助。

相反，您应该考虑使用vh（视图高度）和vw（视图宽度）单位，因为这些单位用于用户的实际视口目前可以看到。

为了将'x'放在图像的右上角，您将不得不稍微改变您的CSS。

您可以首先为您的横幅添加css规则。类似的东西：

.banner {
    position:relative;
    display:inline-block;
}

虽然从图像中删除了“position：absolute”规则，但现在您的横幅div将是图像的大小（而不是默认的“100％的屏幕”，div设置为最初）。

这给我们留下了一个问题，你实际上没有设置你希望'x'垂直出现的位置，因此它将默认为'正常位置'，在这种情况下，它将低于图片。要解决此问题，您需要在“x”类中添加top:或bottom:声明，在我的情况下，我选择将其设置为顶部（top:0; ）。

可以显示整个小提琴here

或在这里：

.banner img {
  max-width: 100vw;
  max-height: 100vh;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  color: red;
  background: #000;
  padding: 4px;
}
.banner {
  position: relative;
  display: inline-block;
}

<div class="banner">
  <img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg" /> <a href="" class="close-btn">X</a>

</div>

Answer 2

我更新了链接

http://jsfiddle.net/qq590xz5/3/

<div class="banner">
    <div style="position:abolute;">
    <img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
     <a href="" class="close-btn">X</a>
        </div>
</div>

.banner img{
    max-width:50%;
    max-height:100%;

}
.close-btn{
    position:absolute;
    z-index:2;
    color:red;
    top:1%;
    background:#000;
    padding:4px;
}

看看

由于

Answer 3

试试这个..

<强> HTML

<div class="banner">
    <img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
     <a href="" class="close-btn">X</a>
</div>

<强> CSS

.banner{
    position:relative;
    width:200px;
}

img{
    max-width:100%;
}

.close-btn{
    position:absolute;
    right:0;
    top:0;
    z-index:1;
    color:red;
    background:#000;
    padding:4px;
}

Fiddle Demo

Answer 4

我找到了一个解决方案，让图像保持水平居中和图像右上方的x按钮。它涉及：

1）使.banner绝对定位，每个窗口边缘都有边距。这使整个.banner居中，但如果您需要使用固定位置与用户的视口一起滚动，则可能需要使用固定位置。

只要没有任何其他定位元素作为其父母，它就会工作。

.banner {
  position: absolute;
  top: 5%;
  left: 25%;
  right: 25%;
  bottom: 5%;
}

2）做一个贴在图像上的东西，它将作为小X的定位指南。

 <div class="shrinkwrap">
     <img src="...">
     <a href="" class="close-btn">X</a>
 </div>

.shrinkwrap { 
  /* shrink-wraps this div around its content;
     as a side-effect, lets this div be centered with text-align: center; */
  display: inline-block; 

  /* new positioning context! */
  position: relative; 

  /* keeps the responsiveness */
  max-width: 100%;
  height: 100%;

}

3）将收缩膜包装器定位在.banner的中心位置。

.banner {
  /* ... */ 
  text-align: center;
}

.close-btn {
  /* ... */
  top: 0;  
}

此处的完成版本位于：http://jsfiddle.net/boxmein/qq590xz5/5/

使元素与绝对定位元素对齐，就好像它是相对的一样

4 个答案: