#jquery #html #css
Вопрос:
У меня есть этот сайт, которым я занимался в качестве хобби, и я столкнулся с проблемой, для которой не могу найти решения.
сайт: josesebastianmanunta.com/daniel
ПРОБЛЕМА: в приведенном ниже коде я использую % для своей ширины для изменения размера, что работает, но при изменении размера img .sec1 изменяется, но не изменяется должным образом. Он не соответствует высоте для .sideslides . Кроме того, я здесь в первый раз. Пожалуйста, дайте мне знать, если я делаю что-то не так. Спасибо! Весь код можно просмотреть через браузер.
Код проблемы:
lt;div id="sec1_and_side"gt; lt;div class="sec1"gt; lt;img src="images/dan.jpg" id="dan"/gt; lt;/divgt; lt;div class="sideslides"gt; lt;div class="sec sideslider"gt; lt;img src="images/feature-3.jpg" id="feature3" class="img1"/gt; lt;img src="images/newfeature/piece5.jpg" class="img2"/gt; lt;/divgt; lt;div class="sec sideslider"gt; lt;img src="images/feature-4.jpg" id="feature4" class="img1"/gt; lt;img src="images/newfeature/piece4.jpg" class="img2"/gt; lt;/divgt; lt;div class="sec sideslider"gt; lt;img src="images/feature-5.jpg" id="feature5" class="img1"/gt; lt;img src="images/newfeature/piece3.jpg" class="img2"/gt; lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. Какого эффекта вы на самом деле добиваетесь? Вы хотите, чтобы высота секунды 1 всегда совпадала с высотой боковых оползней? Вместо того, чтобы цитировать живой сайт, который может измениться со временем, возможно, используйте jsfiddle. сеть, которая позволяет сохранять HTML, CSS и Javascript, и размещать ссылку на это.
2. Извините, я вижу, какого эффекта вы добиваетесь сейчас. Основное изображение, плюс 3 изображения справа и два изображения, рядом, внизу. Но высота основного изображения не соответствует 3 изображениям справа.
Ответ №1:
Чтобы высота основного изображения соответствовала высоте 3 изображений справа, основное изображение должно быть немного больше. Примерно на 6 пикселей больше, чтобы соответствовать зазорам в панелях справа.
Используйте редактор изображений, чтобы изменить размер холста на 6 пикселей вверху и заполнить его белым цветом.
Вы могли бы попробовать исправить это с помощью CSS, добавив следующее, но это не очень хорошо изменит размер. Смешивание абсолютного px с процентами никогда не дает хороших результатов.
.sec1 { vertical-align: baseline; padding-top: 6px; background-color: white; } Обновление: При максимальном размере вы заметите разрыв между верхним и первым изображением в правом столбце. Это связано с тем, что изображения в правом столбце имеют максимальную высоту. Чтобы бороться с этим и обеспечить соответствие высоты основного изображения правой колонке, поставьте max-height » вкл .sec1 .». Используя решение CSS, это max-height будет 375 пикселей, чтобы учесть заполнение сверху. Используя решение с измененным размером изображения, оно будет 381 пикселей (125 пикселей * 3 3 пикселя * 2).