自动获取图像的宽度和调整CSS

我说在我的图像底部的小“吧”： http://jsfiddle.net/mown4v50/自动获取图像的宽度和调整CSS

的问题是，盒子的方式到大，我知道，我已经设置了框的宽度到500px，但我可以让它自动获取图像的宽度，并通过它自己调整它？当然，我可以设置所有的图像具有相同的宽度，所以我不需要混淆盒子的宽度，但有什么好玩的。

CSS：

a.hovertext { 
       position: relative; 
       width: 500px; 
       text-decoration: none !important; 
       text-align: center; 
      } 
      a.hovertext:after { 
       content: attr(title); 
       position: absolute; 
       left: 0; 
       bottom: 0; 
       padding: 0.5em 20px; 
       width: 460px; 
       background: rgba(0, 0, 0, 0.8); 
       text-decoration: none !important; 
       color: #fff; 
       opacity: 0; 
       -webkit-transition: 0.5s; 
       -moz-transition: 0.5s; 
       -o-transition: 0.5s; 
       -ms-transition: 0.5s; 
      } 
      a.hovertext:hover:after, a.hovertext:focus:after { 
       opacity: 1.0; 
      }

HTML：

<body> 
    <center> 
     <p><a class="hovertext" href="#" title="Tomb Raider - 2013"><img src="http://tombraiders.net/stella/images/TR9/large/box-art/TR-box-art-PC.jpg" width="320" height="451" border="0" alt="Tomb Raider"></a> 
     </p> 
    </center> 
</body>

来源

2015-09-12 Raven

您可以使用display: inline-block的p元素，使其适合在图像周围。然后，您可以通过为链接指定left，bottom和right属性而不是宽度来定位链接。

p { 
 
    display: inline-block; 
 
} 
 
a.hovertext { 
 
    position: relative; 
 
    text-decoration: none !important; 
 
    text-align: center; 
 
} 
 
a.hovertext:after { 
 
    content: attr(title); 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    padding: 0.5em 20px; 
 
    background: rgba(0, 0, 0, 0.8); 
 
    text-decoration: none !important; 
 
    color: #fff; 
 
    opacity: 0; 
 
    -webkit-transition: 0.5s; 
 
    -moz-transition: 0.5s; 
 
    -o-transition: 0.5s; 
 
    -ms-transition: 0.5s; 
 
} 
 
a.hovertext:hover:after, 
 
a.hovertext:focus:after { 
 
    opacity: 1.0; 
 
}

<body> 
 
    <center> 
 
    <p> 
 
     <a class="hovertext" href="#" title="Tomb Raider - 2013"> 
 
     <img src="http://tombraiders.net/stella/images/TR9/large/box-art/TR-box-art-PC.jpg" width="320" height="451" border="0" alt="Tomb Raider"> 
 
     </a> 
 
    </p> 
 
    </center> 
 
</body>

Update fiddle

来源

2015-09-12 21:19:57 GolezTrol

太谢谢你了！ – Raven

自动获取图像的宽度和调整CSS

回答

相关问题