CSS Görüntüyü Yeniden Boyutlandırıldı ve Kırpıldı

Farklı bir boyut oranına sahip olsa bile, belirli bir genişlik ve yükseklikte bir URL'den bir resim göstermek istiyorum. Bu yüzden yeniden boyutlandırmak (oranı koruyarak) ve daha sonra görüntüyü istediğim boyuta kesmek istiyorum.

Html imgözelliği ile yeniden boyutlandırabilir ve ile kesebilir background-image.
Her ikisini de nasıl yapabilirim?

Misal:

Bu görüntü:

800x600Piksel boyutu var ve ben bir 200x100piksel görüntüsü gibi göstermek istiyorum

İle imggörüntüyü yeniden boyutlandırabilirim 200x150px:

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

Bu bana şunu verir:

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

Ve background-imageben ile görüntü 200x100pikselleri kesebilir .

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

Bana verir:

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

Her ikisini de nasıl yapabilirim?
Görüntüyü yeniden boyutlandırın ve sonra istediğim boyutta kestirdim?

Her iki yöntemin bir kombinasyonunu kullanabilirsiniz.

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

marginGörüntüyü içinde hareket ettirmek için negatif kullanabilirsiniz <div/>.

CSS3 background-imageile background-sizeher iki hedefi de aynı anda yerine getirerek a'nın boyutunu değiştirmek mümkündür .

Orada örnekler bir grup üzerinde css3.info .

Uygulanan senin Örneğin dayalı kullanarak, donald_duck_4.jpg . Bu durumda, background-size: cover;sadece istediğiniz şeydir - içerdiği background-imagetüm alanı kaplamak için uyuyor <div>ve fazlalığı (orana bağlı olarak) kırpıyor.

.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 arka plan görüntüsü Arka plan boyutlu

Bunu kullanmaya çalıştınız mı?

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

Görüntüyü yeniden boyutlandırmam, merkezlemem (hem dikey hem de yatay olarak) ve kırpmam gerekiyordu.

Tek bir css hattında yapılabileceğini öğrendiğim için mutlu oldum. Buradaki örneği kontrol edin: http://codepen.io/chrisnager/pen/azWWgr/?editors=110

İşte bu örnekten CSSve HTMLkodu:

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

İçeren div, taşmayı gizleyerek görüntüyü kırpır.

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

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

Teşekkürler sanchothefat.

Cevabında bir gelişme var. Kırpma her görüntü için çok özel olduğundan, bu tanımların CSS yerine HTML'de olması gerekir.

<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>etiketi ile oynuyorsanız, size yardımcı olabilir

Aşağıdaki kod resminizi sizin için kırpacaktır. Nesne sığdırma ile oynayabilirsiniz

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

Canlı Örnek: 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);
      }

Açıklama: Burada görüntü, görüntünün genişlik ve yükseklik değeri ile yeniden boyutlandırılır. Kırpma, clip özelliği ile yapılır.

Klip özelliği ile ilgili ayrıntılar için şu adresi izleyin: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

Kırpma sınıfında, görünmesini istediğiniz görüntü boyutunu yerleştirin:

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

Html şöyle görünecektir:

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

İmg etiketini div etiketine koyabilir ve her ikisini de yapabilirsiniz, ancak tarayıcıdaki görüntüleri ölçeklememeye karşı öneriyorum. Çoğu zaman berbat bir iş çıkarır çünkü tarayıcılar çok basit ölçekleme algoritmalarına sahiptir. Ölçeklemenizi önce Photoshop veya ImageMagick'te yapmak, daha sonra istemciye hoş ve güzel bir şekilde sunmak daha iyidir.

Yaptığım şey, web ucunda daha az veri gönderecek şekilde sunucu ucunda bir resmi yeniden boyutlandıracak ve kırpacak bir sunucu tarafı komut dosyası oluşturmaktır.

Oldukça önemsiz, ancak ilgilenen varsa, kodu kazıp gönderebilirim (asp.net)

Orada hizmetler sizin için yapacaktır Dosya yiginina gibi.

Resim URL'nizi alır ve URL parametrelerini kullanarak yeniden boyutlandırmanıza olanak tanır. Oldukça kolay.

Görüntünüz 200x100 boyutuna yeniden boyutlandırıldıktan sonra ancak en boy oranını koruduktan sonra şöyle görünür

URL'nin tamamı şöyle görünüyor

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

ama önemli olan sadece

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

clip-pathMülkü kullanmayı deneyin :

Clip-path özelliği, bir öğeyi temel bir şekle veya bir SVG kaynağına kırpmanıza olanak tanır.

Not: clip-path özelliği, kullanımdan kaldırılmış clip özelliğinin yerini alacaktır.

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

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

Daha fazla örnek burada .

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

Eğer Bootstrap kullanıyorsanız, kullanmayı deneyin { background-size: cover; }için <div>belki div sınıf söz vermek <div class="example" style=url('../your_image.jpeg');>o olur böylece div.example{ background-size: cover}

Bunu son zamanlarda yapmam gerekiyordu. Bir NOAA grafiğine küçük resim bağlantısı yapmak istedim. Grafikleri her an değişebileceğinden, küçük resmimin onunla değişmesini istedim. Ancak grafikleriyle ilgili bir sorun var: üstte büyük bir beyaz kenarlık var, bu yüzden küçük resmi yapmak için ölçeklendirirseniz, belgede yabancı boşluklarla sonuçlanırsınız.

İşte nasıl çözdüm:

http://sealevel.info/example_css_scale_and_crop.html

Önce biraz aritmetik yapmam gerekiyordu. NOAA'nın orijinal görüntüsü 960 × 720 piksel, ancak üst yetmiş piksel gereksiz beyaz kenarlık alanı. Üstte fazladan kenarlık alanı olmayan 348 × 172 küçük resme ihtiyacım vardı. Bu, orijinal görüntünün istenen kısmının 720 - 70 = 650 piksel yüksekliğinde olduğu anlamına gelir. Bunu 172 piksele kadar ölçeklendirmem gerekiyordu, yani 172/650 =% 26.5. Bu, ölçeklendirilmiş görüntünün üst kısmından silinmesi gereken 70 = 19 satırlık piksellerin% 26,5'i anlamına geliyordu.

Yani…

1. Yüksekliği ayarlayın = 172 + 19 = 191 piksel:

   yükseklik = 191

2. Alt kenar boşluğunu -19 piksele ayarlar (görüntüyü 172 piksel yüksekliğe kısaltır):

   margin-bottom: -19px

3. Üst konumu -19 piksele ayarlayın (görüntüyü yukarı kaydırın, böylece en üst 19 piksel satırı taşar ve alt satırlar yerine gizlenir):

   top: -19px

Ortaya çıkan HTML şöyle görünür:

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

Gördüğünüz gibi, içeren <a> etiketini biçimlendirmeyi seçtim, ancak bunun yerine bir <div> stilinde olabilirsiniz.

Bu yaklaşımın bir özelliği, sınırları gösterirseniz, üst kenarlığın eksik olacağıdır. Zaten border = 0 kullandığım için bu benim için bir sorun değildi.

Kodem'in Görüntü Yeniden Boyutlandırma Hizmetini kullanabilirsiniz . İstediğiniz görüntüyü yalnızca http aramasıyla yeniden boyutlandırabilirsiniz. Tarayıcıda raslantısal olarak kullanılabilir veya üretim uygulamanızda kullanılabilir.

• Resmi tercih ettiğiniz bir yere yükleyin (S3, imgur vb.)
• Özel API URL'nize takın (kontrol panelimizden)