Поверните изображение в таблице

Question

Я экспериментирую с вращателем фейдера изображения, который я нашел на jsFiddle. У меня проблемы с изображениями внутри таблицы, так как изображение всегда перекрывает границы таблицы. Есть ли способ обеспечить высоту стола той же высоты, что и изображения (моя таблица определяется с использованием процентов). Вот код:

$('.fadein img:gt(0)').hide(); 
 

 
setInterval(function() { 
 
    $('.fadein :first-child').fadeOut() 
 
    .next('img') 
 
    .fadeIn() 
 
    .end() 
 
    .appendTo('.fadein'); 
 
}, 4000); // 4 seconds

.fader { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%px; 
 
} 
 
.fadein { 
 
    position: relative; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table border="1" width=100% class="fader"> 
 
    <tr> 
 
    <td width="70%"> 
 
     <div class="fadein"> 
 

 
     <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"> 
 

 
     </div> 
 
    </td> 
 
    <td>testing 123</td> 
 
    </tr> 
 
</table>

Answer 1

Я считаю, что ваш вопрос может исходить из того, что для небольшого количества времени, 2 изображений обнаружиться одновременно вызывая пересекающиеся вопросы.

Если вы добавите в свою функцию delay(), то он должен сортировать вашу проблему.

$('.fadein img:gt(0)').hide(); 
 

 
setInterval(function() { 
 
    $('.fadein :first-child').fadeOut('500').next().delay('400').fadeIn('500').end().appendTo('.fadein'); 
 
    setTimeout(function() { 
 
    $('.fadein :first-child').css('display', 'block'); 
 
    }, 400); 
 
}, 4000);

.fader { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.fadein { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
.fadein img { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table border="1" width=100% class="fader"> 
 
    <tr> 
 
    <td width="70%" class="fadein"> 
 

 
     <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"> 
 

 
    </td> 
 
    <td>testing 123</td> 
 
    </tr> 
 
</table>