jQuery: получить визуализированную ширину изображения в центре.

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