CSS Відображення розміру та обрізання зображення

Я хочу показати зображення з URL-адреси з певною шириною та висотою, навіть якщо воно має інше співвідношення розмірів. Тому я хочу змінити розмір (підтримуючи співвідношення), а потім вирізати зображення до потрібного розміру.

Я можу змінити розмір за допомогою imgвластивості html і можу вирізати background-image.
Як я можу зробити те і інше?

Приклад:

Це зображення:

Має 800x600пікселі розміру, і я хочу показати, як зображення 200x100пікселів

З imgя можу змінити розмір зображення 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

Це дає мені це:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

І background-imageя можу вирізати 200x100пікселі зображення .

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

Дає мені:

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

Як я можу зробити те і інше?
Змініть розмір зображення, а потім виріжте його потрібний розмір?

Ви можете використовувати комбінацію обох методів, наприклад.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

Ви можете використовувати мінус marginдля переміщення зображення в межах <div/>.

З CSS3 це можна змінити розмір background-imageз background-size, виконуючи обидві мети відразу.

Є купа прикладів на css3.info .

Реалізовано на основі вашого прикладу , використовуючи donald_duck_4.jpg . У цьому випадку background-size: cover;це саме те, що ви хочете - воно підходить background-imageдля покриття всієї площі вмісту <div>та вирізає надлишки (залежно від співвідношення).

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

<div class="with-bg-size">Donald Duck!</div>

css3 фонове зображення фоновий розмір

Ви намагалися це використати?

.centered-and-cropped { object-fit: cover }

Мені потрібно було змінити розмір зображення, по центру (і вертикально, і горизонтально), а потім обрізати його.

Я радий виявив, що це можна зробити в одному css-рядку. Перевірте приклад тут: http://codepen.io/chrisnager/pen/azWWgr/?editors=110

Ось CSSі HTMLкод із цього прикладу:

.centered-and-cropped { object-fit: cover }

<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

Містячий div, який фактично обрізає зображення, приховуючи перелив.

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

Дякую санчофате.

Я вдосконалюю вашу відповідь. Оскільки обрізка дуже підібрана для кожного зображення, це визначення має бути в HTML, а не в CSS.

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

object-fitможе допомогти вам, якщо ви граєте з <img>тегом

Наведений нижче код буде обрізати ваше зображення. Ви можете пограти з об'єктом

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

Приклад прямого життя: https://jsfiddle.net/de4Lt57z/

HTML:

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS:

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

Пояснення: Тут зображення змінюється за значенням ширини та висоти зображення. А обрізка проводиться за допомогою власності кліпу.

Докладніше про властивість кліпу читайте на веб-сторінці: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

У класі обрізання розмістіть розмір зображення, який ви хочете показати:

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

Html виглядатиме так:

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

Ви можете помістити тег img у тег div та виконати і те, і інше, але я б рекомендував проти масштабування зображень у веб-переглядачі. Більшу частину часу це виконує хитра робота, оскільки браузери мають дуже спрощені алгоритми масштабування. Краще спочатку зробити масштабування у Photoshop або ImageMagick, а потім подати їх клієнту приємно і красиво.

Що я зробив, це створити скрипт на стороні сервера, який дозволить змінити розмір і обрізати зображення на кінці сервера, щоб він надсилав менше даних по інтервету.

Це досить тривіально, але якщо хтось зацікавлений, я можу викопати і опублікувати код (asp.net)

Є такі сервіси, як Filestack, які зроблять це за вас.

Вони беруть URL-адресу зображення і дозволяють вам змінити його розмір, використовуючи параметри URL-адреси. Це досить просто.

Ваше зображення виглядатиме так після зміни розміру до 200x100, але при збереженні співвідношення сторін

Вся URL-адреса виглядає приблизно так

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

але важлива частина справедлива

resize=width:200/crop=d:[0,25,200,100]

Спробуйте скористатися clip-pathвластивістю:

Властивість clip-path дозволяє відрізати елемент до базової форми або до джерела SVG.

Примітка: Властивість clip-path замінить застаріле властивість кліпу.

img {
  width: 150px;
  clip-path: inset(30px 35px);
}

<img src="http://i.stack.imgur.com/wPh0S.jpg">

Більше прикладів тут .

<div class="crop">
    <img src="image.jpg"/>
</div>

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

Якщо ви використовуєте Bootstrap, спробуйте скористатись { background-size: cover; }для <div>класу div, скажіть, <div class="example" style=url('../your_image.jpeg');>так воно і стає div.example{ background-size: cover}

Мені довелося це зробити нещодавно. Я хотів зробити ескіз-посилання на графік NOAA. Оскільки їх графік міг змінитися в будь-який час, я хотів, щоб мій мініатюр мінявся ним. Але в їхньому графіку є проблема: він має величезну білу облямівку вгорі, тож якщо ви просто масштабуєте його, щоб мініатюра у вас виникла із сторонніми пробілами в документі.

Ось як я це вирішив:

http://sealevel.info/example_css_scale_and_crop.html

Спершу мені потрібно було трохи зайнятися арифметикою. Оригінальне зображення з NOAA - 960 × 720 пікселів, але верхні сімдесят пікселів - це зайва біла рамка. Мені знадобився мініатюр 348 × 172, без додаткової межі на вершині. Це означає, що бажана частина оригінального зображення становить 720 - 70 = 650 пікселів. Мені потрібно було масштабувати це до 172 пікселів, тобто 172/650 = 26,5%. Це означало, що 26,5% із 70 = 19 рядків пікселів потрібно видалити вгорі масштабованого зображення.

Тому…

1. Встановіть висоту = 172 + 19 = 191 пікселів:

   висота = 191

2. Встановіть нижню межу на -19 пікселів (скорочення зображення до висоти 172 пікселів):

   межа-нижня: -19 пікселів

3. Встановіть верхнє положення на -19 пікселів (зміщення зображення вгору, щоб верхні 19-піксельних рядки переповнювались & ховались замість нижнього):

   вгорі: -19 пікселів

Отриманий HTML виглядає приблизно так:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

Як бачите, я вибрав стиль, що містить тег <a>, але замість цього ви можете створити стиль <div>.

Одним із артефактів такого підходу є те, що якщо ви покажете кордони, верхня межа буде відсутня. Оскільки я все-таки використовую border = 0, це для мене не було проблемою.

Ви можете скористатися службою зміни розміру зображення Kodem . Ви можете змінити розмір будь-якого зображення лише за допомогою http-дзвінка. Можна використовувати випадково у веб-переглядачі або використовувати у вашому виробничому додатку.

• Завантажте зображення куди завгодно (S3, imgur тощо)
• Підключіть його до спеціальної URL-адреси API (з нашої інформаційної панелі)