hình nền css thay đổi kích thước chiều rộng chiều cao cây trồng

Question

Tôi đang sử dụng mã này từ mẹo và thủ thuật css để bao gồm hình nền. Vấn đề là nó rescales hình ảnh để phù hợp với cả chiều rộng và chiều cao và thay đổi tỷ lệ khía cạnh. Tôi muốn hình nền để rescale đến chiều rộng toàn màn hình và sau đó cắt chiều cao chỉ (bắt đầu từ phía trên cùng của hình ảnh, không phải là trung tâm) để trang trải các cổng xem. Bằng cách này, tỷ lệ cỡ ảnh sẽ được duy trì.

Vấn đề thứ hai mà tôi gặp phải là có vẻ như nó không hoạt động trừ khi tôi sử dụng FQDN cho hình ảnh thay vì chỉ url bên dưới.

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

Answer 1

Thay vì

background-size: cover; 

bạn sẽ muốn sử dụng

background-size: 100% auto; 

Bìa sẽ căng hình ảnh với kích thước nhỏ như vậy mà cả hai chiều rộng của nó và chiều cao của nó có thể phù hợp với bên trong nội dung khu vực, do đó vấn đề của bạn. Xem thêm về điều đó over here.

Answer 2

Tôi sẽ sử dụng JS cho mục đích này. CSS dường như không xử lý các tỷ lệ khung hình rất tốt.

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

Đầu tiên, tạo một div và đặt một hình ảnh trong nó

<div class="big-image"> 
    <img src="path.jpg" width="1000" height="1000" alt="whatever"> 
</div> 

Sau đó làm điều này trong CSS của bạn:

.featuredImage img { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -10; 
} 
/* this class will be added via JS */ 
.bgwidth { width: 100%; } 
.bgheight { height: 100%; } 

Và cuối cùng, bạn JS

var theWindow = $(window), 
    $bg = $(".big-image img"), // Use your image selector here. 
    aspectRatio = $bg.width()/$bg.height(); 

    $bg.removeAttr('width'); 
    $bg.removeAttr('height'); 

    function resizeBg() { 
    if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
     $bg 
     .removeClass() 
     .addClass('bgheight'); 
    } else { 
     $bg 
     .removeClass() 
     .addClass('bgwidth'); 
    } 
    } 
    theWindow.resize(function() { 
    resizeBg(); 
    }).trigger("resize"); 

Hãy cho tôi biết nếu điều này có ý nghĩa. Không chính xác chỉ CSS mà tôi biết, nhưng đó là giải pháp

Answer 3

Tỷ lệ co hình ảnh không thay đổi khi bạn sử dụng cover. Tuy nhiên, tôi tin rằng những gì bạn muốn là để sửa chữa dưới cùng của hình ảnh, kể từ khi bạn nói rằng bạn muốn nó được cắt từ đầu, không trung tâm, mà tôi nghĩ bạn muốn nói không từ trên xuống dưới.

Nếu bạn muốn giữ đáy ở dưới cùng, (có thể là một đồng cỏ với bầu trời lớn có thể tránh được?) Thì bạn sẽ cần thay đổi vị trí thành center bottom từ center center.

Nếu bạn làm cho nó tự động 100% như Nit được đề xuất, thì trên cửa sổ có tỷ lệ chiều cao/chiều rộng của phần tử html lớn hơn hình ảnh của bạn, bạn sẽ thấy không gian trống ở đầu có thể là thứ bạn muốn trong trường hợp bạn đang sử dụng một hình ảnh mờ dần vào cùng màu ở trên cùng ...

Đối với vấn đề thứ hai của bạn, nó không phải là fqdn, nó là tham chiếu tương đối/tuyệt đối của đường dẫn của bạn. Theo css của bạn, nên có một thư mục hình ảnh nơi tập tin css của bạn là có một bg.jpg trong đó.

index.html 
main.css 
images/ 
    bg.jpg