CSS, orijinal boyutu belirtmeden görüntüyü içeren div'e sığacak şekilde ölçeklendirir

Bir jquery kaydırıcısında görüntülenmek üzere farklı boyutlarda resimler yükleyebileceğim bir web sitesine sahip olmak istiyorum. Görüntüyü içeren bir div'e sığdıramıyorum (ölçeklendiremiyorum). Bunu şu şekilde yapmayı planlıyorum

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>

<body>

<div id="wrapper"> 

<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>

</div>  
</body>
</html>

Ve CSS

#wrapper {
    width: 400px;
    height: 400px;
    border: 2px black solid;
    margin: auto;
}

#im {
    max-width: 100%;
}

CSS'de resmimin maksimum genişliğini %100 olarak ayarlamaya çalıştım. Ama bu işe yaramıyor.

Volker E.
Edited question 2014ösp39ös23 Mart 2014 в 11:39
Programlama
scaling html css
2013ööp2öö6 Eylül 2013 в 6:02
29 görünümler
Çözüm

Bunu gerçekleştirmek için bir arka plan resmi kullanabilirsiniz;

MDN'den - Arka Plan Boyutu: İçerir:

Bu anahtar sözcük, arka plan görüntüsünün mümkün olduğunca büyük olacak şekilde ölçeklendirilmesi gerektiğini belirtirken, her iki boyutunun da arka plan konumlandırma alanının ilgili boyutlarına eşit veya daha küçük olmasını sağlar.

[Demo][3]

CSS:

#im {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("path/to/img");
    background-repeat: no-repeat;
    background-size: contain;
}

HTML:

<div id="wrapper">
    <div id="im">
    </div>
</div>
Yorumlar (1)

hem genişlik hem de yükseklik istiyorsanız deneyebilirsiniz

 background-size: cover !important;

ancak bu, görüntüyü bozmaz ancak div'i doldurur.

Yorumlar (0)

Çok basit. Sadece img'nin genişliğini %100 olarak ayarlayın

Yorumlar (2)