自动获取图像宽度并调整CSS_Css

自动获取图像宽度并调整CSS

css

自动获取图像宽度并调整CSS,css,Css,我在图片底部添加了一个小“条”：问题是盒子太大了，我知道我已经将盒子宽度设置为500px，但是我能让它自动获得图像的宽度并自行调整吗？当然，我可以设置所有的图像具有相同的宽度，这样我就不需要弄乱框的宽度，但这有什么乐趣呢 CSS: HTML: 您可以在p元素上使用display:inline block，使其适合图像。然后，您可以通过指定链接的左、下和右属性而不是宽度来定位链接 p{ 显示：内联块； } a、悬停文字{ 位置：相对位置；文字装饰：无！重要；文本对齐：居中； }

我在图片底部添加了一个小“条”：

问题是盒子太大了，我知道我已经将盒子宽度设置为500px，但是我能让它自动获得图像的宽度并自行调整吗？当然，我可以设置所有的图像具有相同的宽度，这样我就不需要弄乱框的宽度，但这有什么乐趣呢

CSS:

HTML:

您可以在

元素上使用

display:inline block

，使其适合图像。然后，您可以通过指定链接的

左

、

下

和

右

属性而不是宽度来定位链接

p{
显示：内联块；
}
a、 悬停文字{
位置：相对位置；
文字装饰：无！重要；
文本对齐：居中；
}
a、 悬停文字：之后{
内容：attr（title）；
位置：绝对位置；
左：0；
底部：0；
右：0；
填充：0.5em20px；
背景：rgba（0,0,0,0.8）；
文字装饰：无！重要；
颜色：#fff；
不透明度：0；
-webkit转换：0.5s；
-moz转变：0.5s；
-o-转变：0.5s；
-ms转换：0.5s；
}
a、 悬停文字：悬停：之后，
a、 鼠标悬停文本：焦点：之后{
不透明度：1.0；
}

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;
            }

<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>