У меня есть настраиваемый дизайн. Теперь я использую плагин innerfade. Он каролизирует изображения, как следует, но я замечаю, что при изменении ширины страницы высота изображения становится меньше и не покрывает всю необходимую область. Таким образом, к тому времени, когда она сжимается с ширины 1440 пикселей до 320 пикселей, Высота img составляет 25 процентов от первоначального div. У меня есть элемент css, нацеленный на img {width:%; высота: авто;}. Содержимое контейнера в jQuery устанавливается равным «100%». Я попробовал «авто» в контрэлементе JQuery, а также в контейнере для статического «400px». Что я могу сделать, чтобы изображение покрывало весь div при использовании innerfade? Если бы это был обычный образ, у меня не было бы этой проблемы, но это мой первый раз с этим плагином. Любая помощь будет высоко оценен.Отзывчивые изображения с использованием плагина innerfade
0
A
ответ
0
<script type="text/javascript">
\t \t $(document).ready(function(){
\t \t \t $('#test').innerfade();
\t \t \t $(window).on('load', function(){
\t \t \t var sample = $('#test li').height() + 5;
\t \t \t \t $('.wrapper').css({'height': sample});
\t \t \t });
\t \t \t
\t \t \t $(window).on('resize', function(){
\t \t \t \t var sample = $('#test li').height() + 5;
\t \t \t \t $('.wrapper').css({'height': sample}); \t
\t \t \t });
\t \t });
\t </script><style type="text/css">
\t \t .wrapper {
\t \t \t position: relative;
\t \t }
\t \t #test img {
\t \t \t height: auto;
\t \t \t width: 100%;
\t \t }
\t \t #test li {
\t \t \t -webkit-box-sizing: border-box;
\t \t \t -moz-box-sizing: border-box;
\t \t \t box-sizing: border-box;
\t \t \t display: block;
\t \t \t top: 0;
\t \t \t left: 0;
\t \t \t padding: 5px;
\t \t \t width: 100%;
\t \t }
\t \t
\t \t .clear {
\t \t \t clear: both;
\t \t }
\t </style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<head>
\t <meta charset="UTF-8">
\t <title>test</title>
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
\t <script type="text/javascript" src="scripts/jquery.innerfade.js"></script>
\t <script type="text/javascript">
\t \t $(document).ready(function(){
\t \t \t $('#test').innerfade();
\t \t \t $(window).on('load', function(){
\t \t \t var sample = $('#test li').height() + 5;
\t \t \t \t $('.wrapper').css({'height': sample});
\t \t \t });
\t \t \t
\t \t \t $(window).on('resize', function(){
\t \t \t \t var sample = $('#test li').height() + 5;
\t \t \t \t $('.wrapper').css({'height': sample}); \t
\t \t \t });
\t \t });
\t </script>
\t
</head>
<body>
\t <div class="wrapper" style="width: 100%; max-width: 700px; margin: 30px auto; background-color: #666; height: 500px;">
\t \t \t
\t \t \t <ul id="test" style="margin: 5% auto; padding: 0; list-style: none;">
\t \t \t \t <li><img src="images/img1.jpg" alt=""></li>
\t \t \t \t <li><img src="images/img2.jpg" alt=""></li>
\t \t \t \t <li><img src="images/img3.jpg" alt=""></li>
\t \t \t \t <li><img src="images/img4.jpg" alt=""></li>
\t \t \t \t <li><img src="images/img5.jpg" alt=""></li>
\t \t \t </ul>
\t </div>
\t <div class="clear"></div>
\t <div class="wrapper" style="width: 100%; max-width: 700px; margin: 30px auto;">
\t \t
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit est, rutrum quis commodo sed, pharetra id erat. Pellentesque vel suscipit velit. Nulla nec ante hendrerit, sagittis neque id, ultricies urna. Etiam luctus nisl ac cursus cursus. In nec viverra ligula. Nullam porta tellus sit amet convallis pharetra. In hac habitasse platea dictumst. Aenean suscipit pretium mi in luctus. Phasellus vestibulum sem dictum, porta quam convallis, sollicitudin augue. Quisque elit metus, tristique vel maximus a, congue at mi. Duis pharetra, massa vel maximus consequat, ex ipsum faucibus augue, ultricies eleifend nisi velit vel ex.
\t \t </p>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet accumsan justo. Maecenas eget luctus magna, in dictum ex. Mauris posuere risus et magna aliquet dignissim. Sed non condimentum enim. Sed gravida tincidunt arcu, id cursus velit. Donec sit amet consequat dolor.
\t \t </p>
\t \t
\t </div>
\t
</body>
</html>
0
Смежные вопросы
- 1. Отзывчивые изображения с использованием Bootstrap
- 2. Отзывчивые изображения с использованием фонового изображения CSS
- 3. Отзывчивые фоновые изображения с использованием спрайтов
- 4. Wordpress отзывчивые изображения с использованием загрузчика cms
- 5. Отзывчивые изображения с использованием srcset и размеров
- 6. Всегда сосредоточенные отзывчивые изображения
- 7. создать отзывчивые изображения с бутстрапом
- 8. Отзывчивые изображения с javascript document.write
- 9. Отзывчивые изображения с отзывчивым текстом
- 10. Проблемы с Bootstrap Отзывчивые изображения
- 11. Отзывчивые изображения с анимацией jQuery
- 12. Отзывчивые изображения на Firefox
- 13. Отзывчивые фоновые изображения
- 14. Отзывчивые изображения в Phonegap
- 15. Bootstrap и отзывчивые изображения
- 16. Полноэкранные отзывчивые изображения разметки
- 17. Отзывчивые изображения reflow
- 18. Отзывчивые фоновые изображения
- 19. Отзывчивые изображения - Дополнительное заполнение?
- 20. отзывчивые ссылки на изображения
- 21. Susy и отзывчивые изображения
- 22. Dynamic InnerFade с JQuery
- 23. HTML5 Отзывчивые изображения
- 24. Bootstrap Отзывчивые изображения Масштабирование
- 25. CSS3/HTML5 Отзывчивые изображения
- 26. Отзывчивые, прокручиваемые изображения
- 27. Отзывчивые диаграммы с использованием D3pie
- 28. Отзывчивые изображения с использованием гибкой компоновки в IE10
- 29. jQuery Поворот изображения с использованием плагина jQueryRotate
- 30. Загрузка обрезанного изображения с использованием плагина cropper.js
Обновление CSS и HTML здесь с jsfiddle или codesnippet –
Это, как предполагается сказать IMG {ширина: 100%; height: auto;} – Benny
Будет добавлять код, когда я вернусь к работе по утрам. Буквально в постели на моем мобильном телефоне, пытаясь понять это. – Benny