Слияние кода завершено, страница обновится автоматически
При написании HTML мы можем столкнуться с проблемой, когда размер картинки не соответствует пропорциям родительского контейнера. Это может привести к искажению пропорций изображения и ухудшению внешнего вида и восприятия. Я искал в интернете методы, которые используют другие пользователи, но ни один из них не позволил мне реализовать нужную функцию.
Затем я просматривал QQ пространство и обнаружил, что там используется макет для изображений, который даёт нужный мне эффект. Я понял, что сложно достичь желаемого результата, используя только чистый CSS. Поэтому я решил использовать jQuery и написал следующий пример кода для решения проблемы искажения размера картинки:
<body>
<div class="post">
<img src="hhh.jpg" />
</div>
<div class="post">
<img src="bbb.jpg" />
</div>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post img').each(function() {
var praWidth = $(this).parent().width(); // ширина родительского контейнера
var praHeight = $(this).parent().height(); // высота родительского контейнера
var width = $(this).width(); // фактическая ширина картинки
var height = $(this).height(); // фактическая высота картинки
var ratio = width / height; // соотношение ширины и высоты картинки
var toLeft = 0; // левое смещение
var toTop = 0; // верхнее смещение
width = praWidth; // устанавливаем ширину равной ширине текущего родительского контейнера
height = width / ratio; // вычисляем высоту после пропорционального масштабирования
if (height < praHeight) { // если высота картинки меньше высоты родительского контейнера
height = praHeight; // устанавливаем высоту картинки равной высоте родительского контейнера
width = height * ratio; // устанавливаем ширину картинки после пропорционального масштабирования
}
// получаем смещение
if (width > praWidth) {
toLeft = (width - praWidth) / 2;
} else {
toTop = (height - praHeight) / 2;
}
// устанавливаем пропорциональные размеры
$(this).css("height", height);
$(this).css("width", width);
// устанавливаем смещение
$(this).css("margin-left", -toLeft);
$(this).css("margin-top", -toTop);
});
});
</script>
</body>
Этот код позволяет изменять размер картинок таким образом, чтобы они соответствовали пропорциям родительских контейнеров.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )