Tôi muốn đặt hình nền thành các div khác nhau, nhưng vấn đề của tôi là:

1. Kích thước của hình ảnh là cố định (60px).
2. Thay đổi kích thước của div

Làm cách nào để kéo giãn hình nền để lấp đầy toàn bộ nền của div?

#div2{
  background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
  height:180px;
  width:200px;
  border: 1px solid red;
}

Kiểm tra mã ở đây.

Thêm vào

background-size:100% 100%;

vào css của bạn bên dưới hình nền.

Bạn cũng có thể chỉ định kích thước chính xác, tức là:

background-size: 30px 40px;

Đây: JSFiddle

Bạn có thể dùng:

background-size: cover;

Hoặc chỉ sử dụng hình nền lớn với:

background: url('../images/teaser.jpg') no-repeat center #eee;

CSS3 hiện đại (được khuyến nghị cho tương lai và có lẽ là giải pháp tốt nhất)

.selector{
   background-size: cover;
   /* stretches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

Tối đa căng mà không cắt cũng không biến dạng (có thể không lấp đầy nền) : background-size: contain;
Buộc kéo căng tuyệt đối (có thể gây biến dạng, nhưng không cắt) : background-size: 100% 100%;

Cách CSS "cũ" "luôn hoạt động"

Hình ảnh định vị tuyệt đối khi là hình ảnh con đầu tiên của cha mẹ (định vị tương đối) và kéo dài nó đến kích thước gốc.

HTML

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

Tương đương với CSS3 background-size: cover;:

Để đạt được điều này động, bạn sẽ phải sử dụng phương thức thay thế đối lập với phương thức chứa (xem bên dưới) và nếu bạn cần căn giữa hình ảnh đã cắt, bạn sẽ cần JavaScript để thực hiện điều đó động - ví dụ: sử dụng jQuery:

$('.selector img').each(function(){ 
   $(this).css({ 
      "left": "50%", 
      "margin-left": "-"+( $(this).width()/2 )+"px", 
      "top": "50%", 
      "margin-top": "-"+( $(this).height()/2 )+"px" 
   }); 
});

Ví dụ thực tế:

Tương đương với CSS3 background-size: contain;:

Điều này có thể hơi phức tạp - thứ nguyên của nền của bạn sẽ làm tràn phần gốc sẽ có CSS ​​được đặt thành 100% còn lại là tự động. Ví dụ thực tế:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto; 
      height: 100%; */
}

Tương đương với CSS3 background-size: 100% 100%;:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

Tái bút: Để thực hiện các thao tác tương đương của bìa / chứa theo cách "cũ" hoàn toàn động (vì vậy bạn sẽ không phải quan tâm đến tràn / tỷ lệ), bạn sẽ phải sử dụng javascript để phát hiện tỷ lệ cho bạn và đặt kích thước như được mô tả. ..

Đối với điều này, bạn có thể sử dụng thuộc tính CSS3 background-size. Viết như thế này:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

Kiểm tra cái này: http://jsfiddle.net/qdzaw/1/

Bạn có thể thêm:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

Bạn có thể đọc thêm về nó ở đây: css3 background-size

body{
  margin:0;
  background:url('image.png') no-repeat 50% 50% fixed;
  background-size: cover;
}

bằng cách sử dụng thuộc tính css:

background-size: cover;

Sử dụng: background-size: 100% 100%; Để tạo hình nền cho phù hợp với kích thước div.

Để giữ nguyên tỷ lệ khung hình, hãy sử dụng background-size: 100% auto;

div {
    background-image: url('image.jpg');
    background-size: 100% auto;
    width: 150px;
    height: 300px;
}

Hãy thử một cái gì đó như sau:

div {
    background-image: url(../img/picture1.jpg);
    height: 30em;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
}