格只覆盖整个图像的区域

我做了一个图像，当徘徊会改变其顶部的div的不透明度。该div应该与图像大小相同。我已经设法将div放在图像的顶部。但是，当我将宽度和高度设置为100％时，div覆盖了图像，包括图像的边距。我想知道如何解决这个问题，以便div只能覆盖没有包括边距的图像。请注意，我需要图像的响应能力，所以我不想尽量以像素为单位设置高度。格只覆盖整个图像的区域

这里的小提琴： https://jsfiddle.net/gsuxlzt/77vn1uyg/

下面的代码：

.margin { 
 
    margin-bottom: 10px; 
 
} 
 
.photo-thumbnail { 
 
    position: relative; 
 
} 
 
.photo-title { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #cbe1f4; 
 
    z-index: 10; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    color: #18121e; 
 
    text-align: center; 
 
    opacity: 0; 
 
    transition: opacity 0.5s linear; 
 
} 
 
.photo-title:hover { 
 
    opacity: .9; 
 
}

<div class="photo-thumbnail"> 
 
    <img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg" /> 
 
    <a href=#> 
 
    <div class="photo-title"> 
 
     <h2 style="padding: 20% 0 20% 0;">Project Title</h2> 
 
    </div> 
 
    </a> 
 
</div>

来源

2016-09-19 Jan Miguel Carangan

该问题来自事实：父div在img的边缘之后扩展了10 px。你确定你不想在div div而不是img上应用margin-bottom吗？ – Propolys

我确实在你和Lucian指出的情况下将保证金放在了母公司。非常感谢。 –

首先，不使用填充和保证金为<img>，而不是用它来.photo-thumbnail

并使用此代码。

.photo-thumbnail { 
    position: relative; 
    display: inline-block; 
    vertical-align: top; 
}

使用内联块为父可以使图像灵活以及只占用必要的区域作为图像。

试试这个，它会工作。

来源

2016-09-19 12:42:10 Lucian

谢谢你指出。只要我将保证金转移到父div，它就会工作。 –

不客气！ – Lucian

在你的榜样你缺少你“的照片缩略图”
收盘您没有义务使用“宽度：100％”，“身高：100％”，当你有绝对定位的元素，而不是你可以把它把所有的空间与

 


    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;

而在你的情况，你可以设置

bottom: 10px;

，因为这是你的DIV多少得出来的图片

这里是一个例子，一个小提琴：https://jsfiddle.net/77vn1uyg/3/

来源

2016-09-19 12:44:57 MRadev

谢谢，这工作！ –

你可以试试这个代码：

HTML代码：

<div class="photo-thumbnail"><img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg"/><a href=#> 
     <div class="photo-title"> 
      <h2 style="padding: 20% 0 20% 0;">Project Title</h2> 
     </div> 
      </a>

CSS代码： -

.margin { 
    margin-bottom: 10px; 
} 
.img-thumbnail{padding:0px;} 
.photo-thumbnail { 
    position: relative; 
} 

.photo-title { 
    width: 100%; 
    height: 100%; 
    background-color: #cbe1f4; 
    z-index: 10; 
    position: absolute; 
    top: 0; 
    left: 0; 
    color: #18121e; 
    text-align: center; 
    opacity: 0; 
    transition: opacity 0.5s linear; 
} 

.photo-title:hover { 
    opacity: .9; 
}

https://jsfiddle.net/Dhavalr/77vn1uyg/8/

来源

2016-09-19 12:51:57

格只覆盖整个图像的区域

回答

相关问题