CSS wyświetla obraz o zmienionym rozmiarze i przyciętym rozmiarze

Z CSS3 można zmienić rozmiar background-image z background-size, realizacja obu celów naraz.

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

Zaimplementowano na podstawie przykładu , używając donald_duck_4.jpg. W tym przypadku {[4] } jest dokładnie tym, czego chcesz-pasuje do background-image, aby pokryć cały obszar zawierający <div> i zacisnąć nadmiar (w zależności od ratio).

.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 tło-obrazek background-size

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

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

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

Byłem szczęśliwy, że można to zrobić w jednej linii css. Sprawdź przykład tutaj: http://codepen.io/chrisnager/pen/azWWgr/?editors=110

Oto kod CSSi HTML z 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ący div z zasadniczo przyciąć 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.

<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 może Ci pomóc, jeśli grasz z <img> tag

Poniższy kod przyciąć obraz dla Ciebie. Możesz bawić się object-fit

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

Explanation: Tutaj obraz jest zmieniany o szerokość i wysokość wartości obrazu. Kadrowanie odbywa się za pomocą właściwości klipu.

Aby uzyskać szczegółowe informacje na temat właściwości clip: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

W klasie crop 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;
}

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

Właściwość clip-path umożliwia przycinanie elementu do podstawowego kształtu lub do źródło SVG.

Uwaga: właściwość clip-path zastąpi przestarzały klip własność.

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

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

Więcej przykładów tutaj .

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

Pobierają adres URL Twojego obrazu i pozwalają zmienić jego rozmiar za pomocą parametrów url. To całkiem proste.

Twój obraz wyglądałby tak po zmianie rozmiaru do 200x100, ale zachowując proporcje

Cały 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żną częścią jest tylko

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

Można umieścić znacznik img w znaczniku div I zrobić oba, ale polecam przed skalowaniem obrazów w przeglądarce. Przez większość czasu robi kiepską robotę, ponieważ przeglądarki mają bardzo uproszczone algorytmy skalowania. Lepiej zrobić skalowanie w Photoshopie lub ImageMagick najpierw, a następnie podać go Klientowi ładnie i ładnie.

To, co zrobiłem, to stworzenie skryptu po stronie serwera, który zmieni rozmiar i przycina obraz na końcu serwera, aby wysyłał mniej danych przez interweb.

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

<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> może dać div klasy say <div class="example" style=url('../your_image.jpeg');> więc staje się div.example{ background-size: cover}

Musiałem to zrobić niedawno. Chciałem zrobić miniaturkę-link 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 ogromną białą obwódkę u góry, więc jeśli przeskalujesz ją, aby utworzyć miniaturę, skończysz z obcymi białymi spacjami 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 najwyższe siedemdziesiąt pikseli to zbędny biały obszar graniczny. Potrzebowałem miniatury 348 × 172, bez dodatkowego obszaru granicznego na górze. Oznacza to, że żądana część oryginalnego obrazu ma wysokość 720-70 = 650 pikseli. Musiałem to przeskalować do 172 pikseli, czyli 172 / 650 = 26,5%. Oznaczało to, że 26,5% z 70 = 19 wierszy pikseli należało usunąć od góry skalowanego obraz.

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

   Margin-bottom: - 19PX

3. Ustaw górną pozycję na -19 pikseli (Przesunięcie obrazu w górę, tak aby górne wiersze 19 pikseli przepełniały się i były ukryte zamiast dolnych):

   Top:-19PX

The wynikowy HTML wygląda tak:

<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 widzisz, wybrałem styl zawierający znacznik , ale zamiast tego możesz stylować

Możesz użyć usługi Kodemu Zmiana rozmiaru obrazu . Możesz zmienić rozmiar dowolnego obrazu za pomocą połączenia http. Może być używany w przeglądarce lub w aplikacji produkcyjnej.

• Załaduj obraz gdzieś, gdzie wolisz (S3, imgur itp.)
[5]} Podłącz go do dedykowanego adresu URL API (z naszego pulpitu nawigacyjnego)