Görüntüyü Tam Genişlik ve Yakınlaştırmaya Ölçekle

Tarayıcının tüm genişliğini doldurmak için kullandığım, ancak belirli bir yüksekliğe kadar tuttuğum bir imge var. Çalışıyor ancak kullanıcı tarayıcı penceresini belirli bir noktadan daha büyük yaparsa yanda beyaz boşluk verir. Daha sonra ölçeklendirildiğinde tam genişliğini almak için görüntüyü etkin bir şekilde yakınlaştırmayı nasıl söylerim?Görüntüyü Tam Genişlik ve Yakınlaştırmaya Ölçekle

<div class="category-image"> 
    <img src="http://www.sfsuicide.org/wp-content/uploads/2010/04/flower-banner.jpg"></img> 
</div> 

.category-image img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    height: 100%; 
    width: auto; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
} 

p.category-image, .category-description { 
    margin-bottom: 35px; 
    position: relative; 
    height: 450px; 
}

Codepen: Burada

zaman kodu http://codepen.io/anon/pen/grRGBe

içinde ilave çalıştı: min-genişliği: 200%; ama sadece görüntüyü büyütür (yakınlaştırma değil).

kaynak

2016-03-27 IVCatalina

Görüntü boyutuyla genişlik eklemeyi deneyin (tarayıcı boyutunun% 100'ü olacak şekilde ayarlayın).

.category-image img { position: absolute; left: 50%; top: 50%; height: auto; width: 100vw; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

Alternatif olarak, kullanım/içeriğe bağlı olarak, bunun yerine bir arka plan görüntüsünü oluşturmak için yararlı olabilir.

kaynak

2016-03-27 02:58:27 Garconis

Teşekkür bu uygulamak, bu sadece olsa görüntüyü bozan ve yüksekliği (auto değil) sabit olması gerekir. Ne yazık ki, nasıl kurulduğuna bağlı olarak bir arka plan görüntüsü olamaz. – IVCatalina

body { 

    height: 100%; 
    margin: 0; 
    background: url(http://i988.photobucket.com/albums/af2/pipewun/Awwshop/DSCF0951.jpg) center fixed no-repeat; 
    background-size: cover; 

}

kaynak

2016-03-27 03:06:43

Teşekkürler, maalesef görüntü nasıl kurulduğuna bağlı olarak arka plan olamaz. – IVCatalina

Burada CodePen'de yaptığım şey var.

"arka plan ile bir resme vücut etiketinin arka plan ayarlama "vücuda {"

ile vücut etiketi kendisi kapma: Bu ne yapıyor

body { 
    background: url('http://www.sfsuicide.org/wp-content/uploads/2010/04/flower-banner.jpg'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
}

(url ... "varsayılan olarak tekrarlamak sever çünkü

arka planı Centering, bunu o zaman bu değiştirilmesi gereken sayfanın üst hizalanmış istiyorsanız, 'merkez top'
Bu, istediğiniz şeyi yapmasını sağlayan sihirli bir öğedir ... Boyutu kaplayacak şekilde ayarlamak, arka plan, görüntü o kadar büyük olmasa bile, tüm alanı dolduracak şekilde büyütür. Kapak benim kullandığım şeydir, seçeneklerinizi ve arka planınızın tam olarak ne yapmak istediğinizi görmek için bu W3Schools sayfasına bakın. http://www.w3schools.com/cssref/css3_pr_background-size.asp

kaynak

2016-03-27 03:07:26 Metroidaron

Teşekkürler, ne yazık ki görüntü nasıl kurulduğuna bağlı olarak bir arka plan olamaz. – IVCatalina

IVCatalina, bu iş parçacığımdaki diğer yanıtıma bakın, görüntüyü css'de arka plan olarak ayarlamak yerine bir görüntü kullanarak gerçekleştirin. :) – Metroidaron

İşte benim yukarıdaki cevaba alternatif yanıtım ... daha basit, ben yoğun aCoolFunction ama benim 3 monitörler arasında pencereden germek zaman beklendiği gibi çalışması için görünür.

... senin CSS kodunuzu kalem için :)

.category-image img { 
     min-width:100%; 
    } 

    p.category-image, .category-description { 
     margin-bottom: 35px; 
     position: relative; 
     height: 450px; 
    }

kaynak

2016-03-27 03:50:08 Metroidaron

Görüntüyü Tam Genişlik ve Yakınlaştırmaya Ölçekle

cevap

İlgili konular