Buộc hình ảnh để mở rộng với Bootstrap

Question

Tôi đang tạo trang web thị sai tĩnh với Boostrap, nhưng tôi đang gặp sự cố với hình ảnh không hiển thị chính xác.

Tôi có một custom style sheet và cho từng bộ phận phụ Tôi có một hình ảnh khác nhau như thế này:

#LM-sub01{ 
background: url(../img/32-cover.jpg) no-repeat center; 
color: #ffffff; 
font-family: 'Lobster', cursive; 
font-weight: 300; 
font-size: 400%; 
} 

Trong một số bộ phận có onnly sẽ là một đoạn ngắn của văn bản đó là nhỏ hơn nhiều so với kích thước hình ảnh . Tôi muốn hình ảnh được chia tỷ lệ với kích thước màn hình, nhưng hiển thị hình ảnh cạnh tranh.

Answer 1

Bạn muốn vùng chứa lấy kích thước của hình nền cho dù nội dung có được lấp đầy vùng chứa hay không. Có một số cách để làm điều này

Ví dụ 1

Sử dụng hình ảnh thực tế, vị trí container position: relative để chứa bất kỳ phần tử con mà được định vị tuyệt đối, sau đó xác định vị trí các nội dung position: absolute với mọi hướng đặt thành 0 và overflow: auto

.example { 
 
    position: relative; 
 
} 
 
.example .content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: auto 
 
}

<div class="example"> 
 
    <img src="http://lorempixel.com/1200/768/" width="100%" /> 
 
    <div class="content"> 
 
    <h1> Hello World! </h1> 
 
    </div> 
 
</div>

Ví dụ 2

Nếu bạn biết rằng hình ảnh sẽ có cùng kích thước, bạn có thể sử dụng lừa padding-bottom, vì padding-top và padding-bottom khi giá trị phần trăm cho tham khảo tỷ lệ chiều rộng, điều này một lần nữa yêu cầu vị trí tương đối và tuyệt đối của vùng chứa một nội dung tương ứng. Thay đổi đệm dưới cùng cho phù hợp với tỷ lệ khung hình của bạn.

.example { 
 
    position: relative; 
 
    background-image: url('http://lorempixel.com/1200/768/'); 
 
    background-size: cover; 
 
    padding-bottom: 75%; 
 
} 
 
.example .content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: auto 
 
} 
 
.

<div class="example"> 
 
    <div class="content"> 
 
    <h1> Hello World! </h1> 
 
    </div> 
 
</div>

Ví dụ 3

Nếu Bạn không biết những gì kích thước hình ảnh sẽ được và bạn không muốn sử dụng phương pháp đầu tiên, bạn có thể sử dụng javascript. Bạn thực sự không thể tìm thấy chiều cao của chính hình nền, vì vậy bạn phải làm như sau.

1. Tạo hình ảnh mới từ hình nền (trình duyệt sẽ chỉ tải hình ảnh một lần) cho từng phần tử.
2. Nối các hình ảnh mới vào các yếu tố mà chúng có liên quan.
3. Di chuyển hình ảnh mới ra khỏi màn hình để người dùng không thể truy cập.
4. Tìm chiều cao được tính của mỗi hình ảnh (với chiều rộng được đặt thành 100% chiều rộng vùng chứa)
5. Đặt chiều cao của từng phần tử gốc thành hình ảnh của nó.

function scaleToBg(queryString) { 
 
    this.elements = document.querySelectorAll(queryString); 
 
    for (var i = 0; i < this.elements.length; i++) { 
 
    var img = new Image(); 
 
    img.src = window.getComputedStyle(this.elements[i], null).getPropertyValue("background-image").replace(/url\(|\)/g, ''); 
 
    img.onload = function() { 
 
     this.parentNode.style.height = window.getComputedStyle(this, null).getPropertyValue("height"); 
 
    }; 
 
    img.className = "scaleToBgImg"; 
 
    img.style.cssText = "position:absolute;left:-100%; width:100%;"; 
 
    this.elements[i].appendChild(img); 
 
    } 
 
    this.resize = function() { 
 
    this.images = document.querySelectorAll(".scaleToBgImg"); 
 
    for (var i = 0; i < this.images.length; i++) { 
 
     this.images[i].parentNode.style.height = window.getComputedStyle(img, null).getPropertyValue("height"); 
 
    } 
 
    }; 
 
    return this; 
 
} 
 
var scale = scaleToBg(".scaleToBg"); 
 
window.onresize = function() { 
 
    scale.resize(); 
 
};

.scaleToBg { 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
#scaleToBg1 { 
 
    background-image: url('http://lorempixel.com/1200/200/'); 
 
} 
 
#scaleToBg2 { 
 
    background-image: url('http://lorempixel.com/1200/400/'); 
 
} 
 
#scaleToBg3 { 
 
    background-image: url('http://lorempixel.com/1200/600/'); 
 
} 
 
#scaleToBg4 { 
 
    background-image: url('http://lorempixel.com/1200/800/'); 
 
}

<div class="scaleToBg" id="scaleToBg1"></div> 
 
<div class="scaleToBg" id="scaleToBg2"></div> 
 
<div class="scaleToBg" id="scaleToBg3"></div> 
 
<div class="scaleToBg" id="scaleToBg4"></div>

Answer 2

Background-size:cover; 

là lựa chọn tốt nhất để rescale hình ảnh cùng với chứa Div

HTML

<!doctype html> 
<html> 
<body> 
    ...Your content goes here... 
</body> 
</html> 

CSS

body { 
    /* Location of the image */ 
    background-image: url(images/background-photo.jpg); 

    /* Background image is centered vertically and horizontally at all times */ 
    background-position: center center; 

    /* Background image doesn't tile */ 
    background-repeat: no-repeat; 

    /* Background image is fixed in the viewport so that it doesn't move when 
    the content's height is greater than the image's height */ 
    background-attachment: fixed; 

    /* This is what makes the background image rescale based 
    on the container's size */ 
    background-size: cover; 

    /* Set a background color that will be displayed 
    while the background image is loading */ 
    background-color: #464646; 
} 

HOẶC xem link bên dưới http://sixrevisions.com/css/responsive-background-image/