CSS Wyświetl obraz zmieniony i przycięty

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:

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?

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

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>

css3 zdjęcie w tle rozmiar tła

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

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

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

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

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>

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

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

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/

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>

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

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.

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)

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]

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 .

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

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}

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.

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)