Как обрезать изображение, если оно слишком велико

У меня есть большие изображения, мне нужно изменить размер и обрезать. Я хочу установить их шириной до 250x - это легко в css. Но я также хочу поддерживать соотношение сторон, и при этом я получаю изображения с разной высотой. Теперь, я хотел бы обрезать их с высоты, чтобы гарантировать, что каждое изображение, например, 250x или больше в высоту, будет обрезано (желательно по центру). Как мне это сделать?Как обрезать изображение, если оно слишком велико

EDIT: Хорошо, я думаю, что я не был чист в своем оригинальном посте. Я хочу: изменить размер изображения до 250 пикселей по ширине. Если высота> 150 пикселей, сжимайте изображение, сохраняя ширину 250 пикселей.

источник

2016-04-20 user2344435

Проверьте это [статья] (https://selbie.wordpress.com/2011/01/23/scale-crop-and-center- ан-изображения с корректным коэффициентом пропорциональностью-в-HTML-и-JavaScript /). Понимает тему довольно подробно. –

@lamelemon Спасибо за ссылку. Я получаю очень смешанные результаты здесь. Иногда он масштабирует его хорошо, но обычно он просто сглаживает картинку до 0x6 по какой-то причине. Но его демо, похоже, работает. – user2344435

попробовать что-то вроде этого:

<div style="position:absolute;top:0;left:0;width:250px;height:250px;overflow:hidden;"> 
    <div style="position:relative;top:0;left:0;height:250px;"> 
     <img style="height:100%;min-height:250px" src="path/to/img" /> 
    </div> 
</div>

источник

2016-04-20 21:10:39

Эй, Эрик, спасибо за ваш ответ. К сожалению, это не так, как предполагалось: https://jsfiddle.net/6xnf91rr/ Я хотел, чтобы изображение застряло в 250 пикселей, но должно быть показано полностью и обрезать все границы, если высота выше 150px. – user2344435

Играйте с шириной и высотой на разных div, пока она не даст желаемый эффект. Мне трудно понять, что именно вы хотите. Благодарю. –

Если вы хотите сохранить Использовать соотношение сторон % ширина & набора высоты для авто.

<div style="width:250px;height:250px;overflow:hidden;"> 
 
    
 
     <img style="width:100%;height:auto;" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3TbEJkubLP_qomeNunFXpKrweFBAitDgsGGADiKVzNICNZ5a6" /> 
 
    
 
</div>

Другой вариант, чтобы установить изображение в качестве фонового изображения и содержат/скрыть это. background-size:contain; или background-size:cover;.

.center-cropped { 
 
    height: 150px;//Crop if height>150 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
}

<div class="center-cropped" 
 
    style="width:250px;background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3TbEJkubLP_qomeNunFXpKrweFBAitDgsGGADiKVzNICNZ5a6);"> 
 
</div>

См: Crop & center image

источник

2016-04-20 21:47:14

Хорошо, я думаю, что я не был ясно в своем оригинальном посте. Я хочу: изменить размер изображения до 250 пикселей по ширине. Если высота> 150 пикселей, сжимайте изображение, сохраняя ширину 250 пикселей. – user2344435

@ пользователь2344435 Я думаю, что первый вариант делает это. –

Если вы намерены обрезать и центрировать любое изображение, я бы предложил вам перейти ко второму варианту. –

Как обрезать изображение, если оно слишком велико

ответ

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