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

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

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

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

источник

2017-01-20 user6738171

Добавить максимальную ширину с шириной изображения. – pol

Но что делать, если каждый миниатюрный снимок загружается в другом размере. – user6738171

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

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

See more here about the behavior of the_post_thumbnail.

источник

2017-01-20 19:33:55 brogrammer

, но что, если фотография, которую я загрузил в пятно с изображенным изображением, скажем, 1700 × 1139? Тогда я хотел бы, чтобы изображение было максимально 1700. Если бы фотография говорила 1000 x 500, я бы хотел, чтобы макс-ширина составляла 1000 – user6738171

@ user6738171 Тогда будьте осторожны с использованием 'the_post_thumbnail', потому что, как предполагает документация, это будет создайте копию своего изображения при загрузке, которая автоматически обрезается до 150 пикселей на 150 пикселей. – brogrammer

На самом деле вам просто нужно использовать «Макс-высоту» & «макс-ширину», предпочтительнее добавить 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>

Спасибо.

источник

2017-01-20 19:39:17

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

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

источник

2017-01-20 20:05:11 GHaddon

Вам нужно сделать 2 изменения.

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

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

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

источник

2017-01-21 07:51:10

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

ответ

Смежные вопросы