CSS: En boy oranını korurken% 100 genişlik veya yükseklik?

Şu anda, tarzı ile, ı kullanabilir width: 100%ve autoyüksekliği (ya da tam tersi), ama yine de, sırasıyla, ya çok geniş olmak veya çok uzun, spesifik bir pozisyona görüntü sınırlamak değildir.

Herhangi bir fikir?

Görüntüde yalnızca bir boyut tanımlarsanız, görüntü en boy oranı her zaman korunur.

Resmin tercih ettiğinizden daha büyük / daha uzun olması sorunu mu?

Görüntü için istediğiniz maksimum yükseklik / genişliğe ayarlanmış bir DIV'nin içine koyabilir ve ardından taşma: gizli olarak ayarlayabilirsiniz. Bu, istediğinizin ötesinde herhangi bir şeyi kırpacaktır.

Bir görüntü% 100 genişlik ve yükseklik ise: otomatik ve çok uzun olduğunu düşünüyorsunuz, bunun nedeni özellikle en boy oranının korunmasıdır. En boy oranını kırpmanız veya değiştirmeniz gerekir.

Lütfen özellikle neyi başarmaya çalıştığınız hakkında biraz daha bilgi verin, ben de daha fazla yardım etmeye çalışacağım!

--- GERİ BİLDİRİM TABANLI DÜZENLEME ---

Eğer aşina mısınız max-width ve max-height özelliklerinin? Bunları her zaman ayarlayabilirsiniz. Herhangi bir minimum ayarlamazsanız ve bir maksimum yükseklik ve genişlik ayarlarsanız, görüntünüz bozulmaz (en boy oranı korunur) ve hangi boyutun en uzun boyuttan ve maks.

Birkaç yıl sonra, aynı gereksinimi arayan, arka plan boyutu kullanarak bir CSS seçeneği buldum.

Modern tarayıcılarda (IE9 +) çalışması gerekiyor.

<div id="container" style="background-image:url(myimage.png)">
</div>

Ve stil:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Referans: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Ve demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

CSS max-widthözelliği olarak ayarlandığında, 100%görüntü üst öğe öğesinin genişliğini dolduracak, ancak gerçek boyutundan daha büyük görüntülenmeyecek ve böylece çözünürlük korunacaktır.

Ayar heightmülkü autogörüntüsünün en boy oranını korur, bu tekniği kullanarak geçersiz kılınan olmak statik yükseklik izin verir ve her yöne orantılı esnemesine görüntü sağlar.

img {
    max-width: 100%;
    height: auto;      
}

Basit zarif çalışma çözümü:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Aynı sorun vardı. Benim için problem, height özelliğinin başka bir yerde zaten tanımlanmış olmasıydı, şöyle düzelttim:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

Basit çözüm:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

Bu arada, bir üst div kabında ortalamak istiyorsanız, bu css özelliklerini ekleyebilirsiniz:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Gerçekten beklendiği gibi çalışması gerekir :)

Cevaplardan biri arka plan boyutu içerir: çok sevdiğim css deyimi içerir, çünkü ne yapmak istediğinizin açık bir ifadesidir ve tarayıcı bunu yapar.

Ne yazık ki er ya da geç, maalesef arka plan görüntü çözümleriyle iyi oynamayan bir gölge uygulamanız gerekecek .

Diyelim ki duyarlı bir kabınız var, ancak minimum ve maksimum genişlik ve yükseklik için iyi tanımlanmış sınırları var.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

Ve kap, taşan veya kırpılan çok yüksek bir görüntü elde etmekten kaçınmak için kabın yüksekliğinin piksellerinin farkında olması gereken bir img'ye sahiptir.

İmg ayrıca ilk olarak daha küçük genişliklerin oluşturulmasına izin vermek için% 100'lük bir maksimum genişlik tanımlamalı ve ikinci olarak parametrik hale getiren yüzde bazında olmalıdır.

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

Güzel bir gölgesi olduğunu unutmayın;)

Bu kemanda canlı bir örneğin tadını çıkarın: http://jsfiddle.net/pligor/gx8qthqL/2/

Bunu, yüksekliği ve genişliği sabit olan, ancak farklı boyutlardaki görüntülerle dikdörtgen bir kap için kullanıyorum.

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

En boy oranına uyması gereken boyutta otomatik kullanmak en iyisidir. Diğer özelliği otomatik olarak ayarlamazsanız, günümüzde çoğu tarayıcı en boy oranına saygı göstermek istediğinizi varsayar, ancak hepsine değil (örneğin Windows 8'deki IE10, örneğin)

width: 100%;
height: auto;

Bu, conca'nın bağlantısını takip ettikten ve arka plan boyutuna baktıktan sonra bulduğum çok basit bir çözüm. Görüntüyü havaya uçurur ve ardından ölçeklendirmeden dış kabın ortasına sığdırır.

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

Eski bir konuya atlamak değil, ama ...

#container img {
      max-width:100%;
      height:auto !important;
}

Yükseklikte! Önemli geçersiz kılmayı kullandığınızda bu doğru olmasa da, sizin için yüksekliği ve genişliği ayarlayan WordPress gibi bir CMS kullanıyorsanız, bu iyi çalışır.

Günümüzde v iewport'un w idth ve h sekizin % 1'ini temsil eden birimler vwve vhbirimler kullanılabilir.

https://css-tricks.com/fun-viewport-units/

Yani mesela:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... görüntüyü, en boy oranını koruyarak, ancak görünüm penceresinin% 100'ünden daha geniş veya daha yüksek olmadan mümkün olduğunca geniş yapacaktır.

CSS genel bir yanlış anlama olduğundan JQuery'yi kullanın (basit tasarım hedefleriyle ilgili sayısız soru ve tartışmalar bunu göstermektedir).

CSS ile istediğinizi yapmak mümkün değildir: görüntü% 100 genişliğe sahip olacaktır, ancak bu genişlik çok büyük bir yüksekliğe neden oluyorsa, maksimum yükseklik uygulanacaktır - ve tabii ki doğru oranlar korunmuş.

Sanırım bu aradığınız şey, ben kendimi arıyordum, ama sonra kodu buldum befor tekrar hatırladım.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

dijital evrim yolunda.