CSS Wyświetl obraz zmieniony i przycięty


333

Chcę wyświetlić obraz z adresu URL o określonej szerokości i wysokości, nawet jeśli ma inny współczynnik rozmiaru. Chcę więc zmienić rozmiar (zachowując współczynnik), a następnie przyciąć obraz do pożądanego rozmiaru.

Mogę zmienić rozmiar za pomocą imgwłaściwości HTML i mogę wycinać background-image.
Jak mogę to zrobić?

Przykład:

Ten obraz:

wprowadź opis zdjęcia tutaj


Ma rozmiar 800x600pikseli i chcę pokazać jak obraz 200x100pikseli


Dzięki imgmogę zmienić rozmiar obrazu 200x150px:

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


To daje mi to:

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


I background-imagemogę wyciąć 200x100piksele obrazu .

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

Daje mi:

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


Jak mogę to zrobić?
Zmienić rozmiar obrazu, a następnie przyciąć go do żądanego rozmiaru?

Odpowiedzi:


474

Możesz użyć kombinacji obu metod np.

    .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>

Możesz użyć negatywu, marginaby przenieść obraz w obrębie <div/>.


9
Zauważ, że jeśli ustawisz position: względne na zawartym obrazie, będziesz musiał ustawić position: względne na zawierającym div. Jeśli nie, odkryłem, że IE faktycznie nie przycina obrazu.
Frank Schwieterman

usuń również wysokość z klasy .crop img
Waqar Alamgir

@ waqar-alamgir To nie zadziałałoby, jeśli usunąłeś deklarację wysokości
roborourke

6
Należy również pamiętać, że podczas korzystania z css do przycinania obrazu użytkownik nadal musi go pobrać. Lepszym rozwiązaniem może być użycie php i GD lub innej biblioteki edycji obrazu do zmiany rozmiaru i przycięcia obrazu przed wysłaniem go do użytkownika. Wszystko zależy od tego, czego chcesz, obciążenia serwera lub przepustowości użytkowników.
J-Rou,

15
Uwaga dla innych: wysokość i szerokość przycięcia określają, gdzie należy wyciąć najbardziej dolną i prawą część obrazu. .crop img wysokość i szerokość przeskaluje obraz. Margines .crop img przesunie obraz
Frederik,

138

Dzięki CSS3 można zmienić rozmiar background-imagez background-size, spełniając oba cele jednocześnie.

Istnieje wiele przykładów na css3.info .

Zaimplementowano na podstawie Twojego przykładu , używając donald_duck_4.jpg . W tym przypadku background-size: cover;jest dokładnie tym, czego chcesz - pasuje background-imagedo pokrycia całego obszaru zawierającego <div>i przycina nadmiar (w zależności od proporcji).

.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>


1
Świetne rozwiązanie, ale jednym zastrzeżeniem jest to, że nie jest kompatybilny z IE <9 (jeśli to ma już znaczenie dla każdego). Chciałbym także wspomnieć, że jeśli zamienisz okładkę z zawartością dla rozmiaru tła, będzie się skalować, ale nie przyciąć obrazu.
devnate

4
W przypadku <img />tagów spójrz na object-fit: coverpowiązane wartości ze specyfikacji CSS Image Values ​​and Replaced Content Module Level 3 .
Joel Purra

110

Próbowałeś tego użyć?

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

Musiałem zmienić rozmiar obrazu, wyśrodkować (zarówno pionowo, jak i poziomo), a następnie przyciąć go.

Z przyjemnością stwierdziłem, że można tego dokonać w pojedynczej linii css. Sprawdź przykład tutaj: http://codepen.io/chrisnager/pen/azWWgr/?editors=110


Oto kod CSSi HTMLz tego przykładu:

.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">


2
Dzięki, myślę, że jest to najłatwiejszy i najbardziej uniwersalny sposób - ale wydaje się, że nie działa z IE: / Znajdź dokumenty tutaj: developer.mozilla.org/de/docs/Web/CSS/object-fit
mozzbozz

2
Dopasowanie obiektowe CSS3 nie jest obsługiwane przez IE11 lub EDGE (14) caniuse.com/#feat=object-fit
oko

1
@ dziwne, że jest obsługiwany w Edge 16, już wkrótce. Jeśli nie jest krytyczny i używany oszczędnie, mógłby być używany dzisiaj
Ray Foss

W CSS3 możemy wypróbować albo img + dopasowanie obiektu, albo div + obraz tła. Z mojego doświadczenia wynika, że ​​obraz tła można wykorzystać do dopasowania do większej liczby warunków.
Eric

1
Na razie jest to również obsługiwane przez Edge (nie wiem od kiedy jednak).
Gerald Schneider

20
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}
<div class="imgContainer">
  <img src="imageSrc" />
</div>

Zawierające div z zasadniczo przycinają obraz, ukrywając przepełnienie.


13
img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />

8

Dzięki sanchothefat.

Poprawiłem twoją odpowiedź. Ponieważ kadrowanie jest bardzo dostosowane do każdego obrazu, te definicje powinny znajdować się w kodzie HTML zamiast CSS.

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


6

object-fitmoże ci pomóc, jeśli grasz z <img>tagiem

Poniższy kod spowoduje przycięcie obrazu dla Ciebie. Możesz bawić się dopasowaniem do obiektu

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

To sprawiło, że mój dzień - mogłem łatwo dołączyć to do slajdu w mojej zręcznej implementacji karuzeli suwaków - proste rozwiązanie obiektu IMG i nie dotykając „podstawy kodu wtyczki suwaka”
andreas-supersmart

to zaleta CSS :)
Hidayt Rahman

5

Przykład na żywo: 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);
      }

Objaśnienie: W tym przypadku rozmiar obrazu jest zmieniany na podstawie szerokości i wysokości obrazu. I przycinanie odbywa się za pomocą właściwości klipu.

Aby uzyskać szczegółowe informacje na temat właściwości klipu, wykonaj następujące czynności: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/


4

W klasie przycinania umieść rozmiar obrazu, który chcesz wyświetlić:

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

HTML będzie wyglądał następująco:

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

3
<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;
}

1

Możesz umieścić tag img w tagu div i zrobić oba, ale odradzam skalowanie obrazów w przeglądarce. Wykonuje kiepską pracę przez większość czasu, ponieważ przeglądarki mają bardzo uproszczone algorytmy skalowania. Lepiej najpierw skaluj w Photoshopie lub ImageMagick, a następnie podaj je klientowi ładnie i ładnie.


1

To, co zrobiłem, to stworzenie skryptu po stronie serwera, który zmieni rozmiar i przyci zdjęcie po stronie serwera, aby wysyłał mniej danych przez sieć.

To dość trywialne, ale jeśli ktoś jest zainteresowany, mogę wykopać i opublikować kod (asp.net)


CGI jest prawdopodobnie najbardziej przenośną metodą (i efektywną pod względem przepustowości), chyba że OP zamierza zezwolić użytkownikowi na dokonanie własnej zmiany rozmiaru i kadrowania za pomocą Javascript.
strager

1

Istnieją usługi takie jak Filestack, które zrobią to za Ciebie.

Pobierają adres URL obrazu i pozwalają na zmianę jego rozmiaru za pomocą parametrów adresu URL. To całkiem proste.

Twój obraz wyglądałby tak po zmianie rozmiaru do 200 x 100, ale z zachowaniem proporcji

Cały adres URL wygląda tak

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

ale ważna część jest sprawiedliwa

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

wprowadź opis zdjęcia tutaj


fajna wtyczka może - ale równie dobrze - niesamowita usługa (nie, nie muszę tego mówić ;-)) - Dosłownie właśnie się zarejestrowałem i jest całkiem fajna
Jonathan Lyon

1

Spróbuj użyć clip-pathwłaściwości:

Właściwość clip-path pozwala przyciąć element do podstawowego kształtu lub źródła SVG.

Uwaga: Właściwość clip-path zastąpi nieaktualną właściwość clip.

img {
  width: 150px;
  clip-path: inset(30px 35px);
}
<img src="http://i.stack.imgur.com/wPh0S.jpg">

Więcej przykładów tutaj .


0
<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*/
}

0

Jeśli używasz Bootstrap, spróbuj użyć { background-size: cover; }dla <div>być może div, aby klasa powiedziała <div class="example" style=url('../your_image.jpeg');>, że tak się stanie div.example{ background-size: cover}


0

Musiałem to ostatnio zrobić. Chciałem zrobić link do miniatury do wykresu NOAA. Ponieważ ich wykres może się zmienić w dowolnym momencie, chciałem, aby moja miniatura zmieniła się wraz z nim. Ale jest problem z ich wykresem: ma wielką białą ramkę u góry, więc jeśli przeskalujesz go, aby miniatura zakończyła się obcym białym znakiem w dokumencie.

Oto jak to rozwiązałem:

http://sealevel.info/example_css_scale_and_crop.html

Najpierw musiałem zrobić trochę arytmetyki. Oryginalny obraz z NOAA ma wymiary 960 × 720 pikseli, ale siedemdziesiąt najlepszych pikseli to zbędny biały obszar obramowania. Potrzebowałem miniatury 348 × 172, bez dodatkowego obszaru obramowania u góry. Oznacza to, że pożądana część oryginalnego obrazu ma 720–70 = 650 pikseli wysokości. Musiałem zmniejszyć to do 172 pikseli, tj. 172/650 = 26,5%. Oznaczało to, że 26,5% z 70 = 19 rzędów pikseli wymagało usunięcia z góry skalowanego obrazu.

Więc…

  1. Ustaw wysokość = 172 + 19 = 191 pikseli:

    wysokość = 191

  2. Ustaw dolny margines na -19 pikseli (skracając obraz do wysokości 172 pikseli):

    margines na dole: -19px

  3. Ustaw górną pozycję na -19 pikseli (przesuwając obraz w górę, tak aby górne rzędy 19 pikseli przepełniały się i były ukryte zamiast dolnych):

    góra: -19px

Powstały HTML wygląda następująco:

<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>

Jak widać, wybrałem styl zawierający znacznik <a>, ale zamiast tego możesz stylizować <div>.

Jednym z artefaktów tego podejścia jest to, że jeśli pokażesz granice, górnej granicy nie będzie. Ponieważ i tak używam border = 0, nie było to dla mnie problemem.


0

Możesz skorzystać z usługi zmiany rozmiaru obrazu Kodem . Możesz zmienić rozmiar dowolnego obrazu za pomocą połączenia HTTP. Może być używany od czasu do czasu w przeglądarce lub w aplikacji produkcyjnej.

  • Prześlij obraz w wybrane miejsce (S3, imgur itp.)
  • Podłącz go do dedykowanego adresu URL interfejsu API (z naszego pulpitu nawigacyjnego)
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.