Question

我有一个非常奇怪的问题（或者我只是努力找到它的提示）。我想要一个可缩放字幕的图像居中。这是我的代码：

HTML

<div class="parent">
    <div class="child">
        <img src="image.jpg" alt="">
        <br>
        <div>Title</div>
    </div>
</div>

CSS

.parent {
    width: 66%;

}

.child {
    width: auto;
    height: auto;
    margin: auto;
}

.child img {
    max-width: 100%;
    max-height: 95%;
    height: auto;
    width: auto;
}

.child div {
    display: inline;
    font-style: italic;
}

现在有趣的部分。我想获取图像的当前宽度并将其应用于.child; text-align: center将无效，这将导致我的头衔也在中心。

但是 - 如果我正在读出图像的宽度，我总是得到它的自然尺寸，而不是它的尺寸。我真的很困惑，我想这很明显......这是我迄今为止尝试过的JS。

的Javascript

$(window).load(function(){
    var $el = $('.child').find('img');
    $el.parent().css('width', $(this).width());

    // I also tried $(this).get(0).width, $(el).width() and $(el).css('width')
    // ...
});

感谢您的帮助！

Answer 1

请检查我创建的这个jsfiddle，它可能是你需要的：

http://jsfiddle.net/2kC3q/2/

我将图像设置为可调整大小（以模拟可扩展）。

文本在中心对齐，当图像宽度和高度改变时，孩子也是如此。

HTML：

<div class="parent">
    <div class="child">
        <img class="image" id="image" src="image.jpg" alt=""/>
            <br/>
        <div class="title">Title</div>
    </div>
</div>

CSS：

.parent {
    width: 66%;

}

.child {
    width: auto;
    height: auto;
    margin: auto;
    border: 1px solid black;
    display: inline-block;
}

.image{
    max-width: 100%;
    max-height: 100%;
    min-width: 50px;
    min-height: 50px;
    display: block;
    border: 1px solid red;
}

.title{
    text-align: center;
    display: block;
    font-style: italic;
}

希望它有所帮助。

Answer 2

试试这个：

$(window).load(function(){
$('.child').find('img').css({'width':parseInt($('.child').find('img').width())+'px', 'margin':'0 auto'});
});

jQuery：获取渲染图像宽度以使其居中

2 个答案: