Phản hồi hình ảnh nền css

Tôi có một trang web (g-floors.eu) và tôi muốn tạo nền (trong css tôi đã xác định hình ảnh bg cho nội dung) cũng đáp ứng. Thật không may, tôi thực sự không có bất kỳ ý tưởng nào về cách làm điều này ngoại trừ một điều mà tôi có thể nghĩ ra nhưng đó là một cách giải quyết. Tạo nhiều hình ảnh và sau đó sử dụng kích thước màn hình css để thay đổi hình ảnh nhưng tôi muốn biết liệu có cách nào thực tế hơn để đạt được điều này không.

Về cơ bản những gì tôi muốn đạt được là hình ảnh (với hình mờ 'G') sẽ tự động thay đổi kích thước mà không hiển thị ít hình ảnh hơn. Nếu nó có thể tất nhiên

liên kết: g-floors.eu

Mã tôi có cho đến nay (phần nội dung)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

Nếu bạn muốn cùng một hình ảnh chia tỷ lệ dựa trên kích thước của cửa sổ trình duyệt:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Không đặt chiều rộng, chiều cao hoặc lề.

EDIT: Dòng trước về việc không đặt chiều rộng, chiều cao hoặc lề đề cập đến câu hỏi ban đầu của OP về tỷ lệ với kích thước cửa sổ. Trong các trường hợp sử dụng khác, bạn có thể muốn đặt chiều rộng / chiều cao / lề nếu cần.

bằng mã này, hình nền của bạn đi vào trung tâm và sửa kích thước của nó bất kể kích thước div của bạn thay đổi, tốt cho kích thước nhỏ, lớn, bình thường, tốt nhất cho tất cả, tôi sử dụng nó cho các dự án của tôi khi kích thước nền hoặc kích thước div của tôi có thể thay đổi

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

Thử cái này :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

CSS:

background-size: 100%;

Điều đó sẽ làm các trick! :)

Đây là sass mixin cho hình nền phản hồi mà tôi sử dụng. Nó hoạt động cho bất kỳ blockyếu tố. Tất nhiên, điều tương tự có thể hoạt động trong CSS đơn giản, bạn sẽ chỉ phải tính toán paddingthủ công.

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

Ví dụ http://jsfiddle.net/XbEdW/1/

Đây là một điều dễ dàng =)

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

Hãy xem bản demo jsFiddle

Đây là cách tốt nhất tôi có.

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

Kiểm tra trên w3schools

Nhiều tùy chọn có sẵn hơn

background-size: auto|length|cover|contain|initial|inherit;

Tôi đã sử dụng

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

mà làm việc rất tốt

#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}

Trang web đáp ứng bằng cách thêm phần đệm vào chiều cao / chiều rộng hình ảnh dưới cùng x 100 = phần đệm dưới cùng%:

http://www.outsidethebrquet.com/responsive-web-design-fluid-background-images/

Phương pháp phức tạp hơn:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

Hãy thử thay đổi kích thước nền eq Firefox Ctrl + M để xem kịch bản hay, tôi nghĩ là hay nhất:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

Bạn có thể sử dụng này. Tôi đã thử nghiệm và nó hoạt động đúng 100%:

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

Bạn có thể kiểm tra trang web của mình với khả năng phản hồi tại Trình mô phỏng kích thước màn hình này: http://www.infobyip.com/testwebsiteresolution.php

Xóa bộ nhớ cache của bạn mỗi khi bạn thực hiện thay đổi và tôi muốn sử dụng Firefox để kiểm tra nó.

Nếu bạn muốn sử dụng một hình ảnh Trang web / URL khác và không thích: background-image:url('../images/bg.png'); // Cấu trúc này là sử dụng hình ảnh từ máy chủ được lưu trữ của riêng bạn. Sau đó sử dụng như thế này: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Thưởng thức :)

Nếu bạn muốn toàn bộ hình ảnh hiển thị không phân biệt tỷ lệ khung hình, hãy thử điều này:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

Điều này sẽ hiển thị toàn bộ hình ảnh cho dù kích thước màn hình.

    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>

Chỉ cần hai dòng mã, nó hoạt động.

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}

Thích ứng cho tỷ lệ vuông với jQuery

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }

background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

hoặc là

background-size:100%;

Tôi nghĩ, cách tốt nhất để làm điều này là:

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

Theo cách này, không cần phải làm gì thêm và nó khá đơn giản.

Ít nhất, nó làm việc cho tôi.

Tôi hy vọng nó sẽ giúp.

Hãy thử sử dụng background-sizenhưng sử dụng TWO ARGUMENT One cho chiều rộng và cái còn lại cho chiều cao

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

thuộc tính vị trí có thể được sử dụng để căn chỉnh đáy và tâm trên cùng theo nhu cầu của bạn và kích thước nền có thể được sử dụng cho vùng trung tâm (bìa) hoặc hình ảnh đầy đủ (chứa hoặc 100%)