107

Birkaç gündür küçük resim galerimi tüm görsellerin aynı yükseklik ve genişlikte görünmesi için yapılandırmaya çalışıyorum. Ancak Css kodunu olarak değiştirdiğimde,

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

Hepsi aynı boyutta olan görüntüler alıyorum, ancak en-boy oranı görüntüleri bozacak şekilde uzatılmış. Bunun yerine görüntü konteynerini yeniden boyutlandırmanın bir yolu yok mu? en boy oranını korumama izin veriyor. ancak görüntüyü yine de yeniden boyutlandırın. (Görüntünün bir kısmını kesersem sorun olmaz.)

Şimdiden teşekkürler!

— Beaniie
kaynak

185

bu, CSS yeniden boyutlandırma ile ilgili bilinen bir sorundur, tüm görüntüler aynı orana sahip olmadıkça, bunu CSS aracılığıyla yapmanın bir yolu yoktur.

En iyi yaklaşım, bir kapsayıcıya sahip olmak ve görüntülerin boyutlarından birini (her zaman aynı) yeniden boyutlandırmak olacaktır. Örneğimde genişliği yeniden boyutlandırdım.

Kap belirli bir boyuta sahipse (benim örneğimde genişlik), görüntünün genişliği% 100 olarak söylenirken, onu kabın tam genişliği yapacaktır. autoYükseklikte görüntü, yeni genişliğe yükseklik orantılı sahip yapacaktır.

Ör:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

— JackJoe
kaynak

42

Bir tarafı (örneğin yükseklik) sabitlemeniz ve diğerini ayarlamanız gerekir auto.

Örneğin

 height: 120px;
 width: auto;

Bu, görüntüyü yalnızca bir tarafa göre ölçeklendirir. Resmi kırpmayı kabul edilebilir bulursanız, sadece

overflow: hidden;

ana öğeye, aksi takdirde boyutunu aşan her şeyi keser.

— Nick Andriopoulos
kaynak

Bunu denedim, ama yine de bana hepsi farklı boyut ve şekillerde görüntüler veriyor, galerinin tek tip olmasını istiyorum, [] [] [] [] [] [] [] [] []

— Beaniie

2

yukarıdakilerin her ikisinin bir kombinasyonunu kullanın: yüksekliği bir sayıya ayarlayın (ölçeği korumak için otomatik genişlikle) ve overflow: hiddenfazlalığı kırpmak için ile ebeveyni belirli bir genişlikle sınırlayın

— Nick Andriopoulos

25

object-fitCss3 özelliğini kullanabilirsiniz.

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

Snippet'i genişlet

Yine de tam olarak cevabınız değil, çünkü kapsayıcıyı genişletmiyor, ancak galeri gibi davranıyor ve imgkendisini şekillendirmeye devam edebilirsiniz .

Bu çözümün bir başka dezavantajı, css3 özelliğinin hala zayıf bir şekilde desteklenmesidir. Daha fazla ayrıntı burada mevcuttur: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . jQuery çözümü orada da bulunabilir.

— dmitry_romanov
kaynak

Teşekkürler, güzel çözüm. :)

— Bibhu

Bu, yalnızca opera atm'de desteklenen bir özellik ile cevap vermek biraz garip ?! caniuse.com/object-fit

— Simon Dragsbæk

4

Demek istediğini anlıyorum @ Simon, teşekkür ederim. Mülkün her yerde desteklenip desteklenmeyeceği hakkında hiçbir fikrim olmadığını söyledim, ancak desteklemese bile , yerini alacak alternatifler için google için bir başlangıç noktası olarak kullanabiliriz . Göndermek için bir başka neden de, tarayıcılar her geçen gün daha iyi hale gelirken cevabın bir süre kalmasıdır, bu yüzden bunu yakın geleceği hedefleyerek de yanıtladım .

— dmitry_romanov

1

Birkaç yıl sonra bu sayfaya geldiğimde, bu 'gelecekteki' cevabı bulduğum için mutluydum!

— petzi

8

Görüntüleri ayarlanabilir / esnek hale getirmek için şunu kullanabilirsiniz:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

— Stanislav
kaynak

5

Tutucunuza arka plan olarak koyun, örneğin

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

Bu, resminizi 120x120'lik bir bölmenin içinde ortalayarak fazla resmin fazlasını keser

— DickieBoy
kaynak

2

Görüntüyü uzatmak istemiyorsanız, onu div kabına taşmadan sığdırın ve gerekirse kenar boşluğunu ayarlayarak ortalayın.

Görüntü kırpılmayacak
En boy oranı da aynı kalacaktır.

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

— Bhushan Dangore
kaynak

0

transform: scale(0.5);

Misal:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

bkz: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

— Mahmut K.
kaynak

-1

Eğer spekt oranını biliyorsanız, farka bağlı olarak yüksekliği ayarlamak için yüzde ile padding-bottom'ı kullanabilirsiniz.

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>

— reco
kaynak

CSS kullanarak orantılı olarak resim boyutlarını değiştiriyor musunuz?

HTML:

CSS:

Misal: