Как сделать чтобы изображение не растягивалось

На моей первой странице я хочу, чтобы миниатюра сообщения была на всю ширину страницы. Но я хочу, чтобы это была полная ширина страницы до ширины изображения, на которое оно было загружено. Поэтому, когда страница становится все больше и больше, я хочу, чтобы изображение перестало быть 100%, как только оно достигло своего фактического размера, а затем просто осталось в этом размере. Прямо сейчас я понял, как сделать миниатюру сообщения полной ширины, однако по мере того, как страница становится больше, изображение просто растягивается, чтобы соответствовать 100%. Как я могу это исправить?

<?php the_post_thumbnail('thumbnail', array('class' => 'large-front-thumbnail')); ?>

.large-front-thumbnail {
    position: relative;
    width: 100%;
    height: auto;
}


wordpress image css image-resizing full-width
person user6738171    schedule 20.01.2017    source источник
comment
Добавьте max-width с шириной изображения.   -  person pol    schedule 20.01.2017
comment
Но что, если каждая миниатюра сообщения загружается в другом размере.   -  person user6738171    schedule 20.01.2017

Ответы (4)


arrow_upward
2
arrow_downward

Вам нужно внести 2 изменения.

Прямо сейчас вы устанавливаете ширину изображения на 100%. Когда вы устанавливаете ширину на 100%, независимо от размера загруженного изображения, оно будет растягиваться до ширины контейнера. Вам нужно установить ширину на авто.

Затем вы хотите установить максимальную ширину 100%. Объединение этих двух свойств будет означать, что ваше изображение будет быстро масштабироваться, но никогда не превысит исходный размер загрузки.

.large-front-thumbnail {
    height: auto;
    max-width: 100%;
    position: relative;
    width: auto;
}
person Nathan Dawson    schedule 21.01.2017

arrow_upward
0
arrow_downward

Пока вы не изменили какие-либо настройки WordPress по умолчанию, размер изображения всегда будет 150 на 150 пикселей. Откуда вы знаете? Поскольку вы передаете аргумент «миниатюра» в the_post_thumbnail.

Поэтому, как сказал @pol, установка правила max-width в 150 пикселей будет работать.

Подробнее о поведении the_post_thumbnail читайте здесь.

person brogrammer    schedule 20.01.2017
comment
но что, если фотография, которую я загрузил в избранное изображение, имеет размер, скажем, 1700 × 1139? Тогда я бы хотел, чтобы изображение было максимальным 1700. Если бы фотография была, скажем, 1000 x 500, я бы хотел, чтобы максимальная ширина была 1000 - person user6738171; 20.01.2017
comment
@user6738171 user6738171 Тогда будьте осторожны с использованием the_post_thumbnail, потому что, как предполагает документация, при загрузке будет создана копия вашего изображения, которая автоматически обрезается до 150 на 150 пикселей. - person brogrammer; 21.01.2017

arrow_upward
0
arrow_downward

На самом деле вам просто нужно использовать «max-height» и «max-width», предпочтительно добавить контейнер div вне ограничения внешнего размера изображения.

<div style="width: 100%;">
    <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx" alt="anything" style="position: absolute; max-height: 100%; max-width: 100%;"/>
</div>

Спасибо.

person Mr Hoelee    schedule 20.01.2017

arrow_upward
0
arrow_downward

Следующий CSS должен быть тем, что вам нужно:

.large-front-thumbnail {
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
}
person GHaddon    schedule 20.01.2017