Bố cục chất lỏng và sprites css

Question

Tôi đã sử dụng sprite css để hiển thị hình nền trên thiết kế có chiều rộng cố định. Im thay đổi để bố trí chất lỏng, nhưng vì vị trí nền hình nền trở nên rung rinh khi trình duyệt thay đổi kích thước.

Có thể sử dụng một sprite css với nền lưới chất lỏng, nơi nó thay đổi kích cỡ với bố cục không?

tôi cần bố trí phù hợp với ví dụ 7 và 8 với trình duyệt mới nhất khác

Answer 1

@media có thể làm việc cho bạn. Không chắc chắn về ie7 & 8 mặc dù.

Answer 2

Thêm vào những gì @brianMaltzan viết về @media bạn có thể sử dụng các nhóm giải pháp khác nhau để có một kiểu khác nhau

<link rel='stylesheet' media='(max-width: 700px)' href='css/small.css' /> 
<link rel='stylesheet' media='(min-width: 701px) and (max-width: 1024px)' href='css/medium.css' /> 
<link rel='stylesheet' media='(min-width: 1025px)' href='css/large.css' /> 

hoặc khối mã css cho phong cách của trang của bạn:

@media (max-width: 860px) { 
    body { 
     width: 600px; 
    } 
} 
@media (min-width: 861px) and (max-width: 1024px) { 
    body { 
     width: 800px; 
    } 
} 
@media (min-width: 1025px) { 
    body { 
     width: 1000px; 
    } 
} 

Tôi khuyên bạn nên sử dụng một vài kích thước cố định sẽ thay đổi với mỗi biểu định kiểu, thay vì tỷ lệ phần trăm (nếu bạn đang sử dụng chúng). Bạn có thể chỉ cho chúng tôi một ví dụ trực tiếp về hình ảnh phù hợp với bố cục chất lỏng của bạn để chúng tôi có thể thấy sự cố không?

Answer 3

Không, điều đó là không thể. Giải pháp được khuyến nghị là sử dụng bản đồ sprite trong một hình ảnh nội tuyến và có chiều cao và chiều rộng của phần tử đó được đặt trong CSS của bạn. Here's a link giải thích cách thực hiện việc này. Điều này cho phép hình ảnh của bạn thay đổi kích thước với bố cục.

Answer 4

Tôi chưa thử điều này, nhưng có những người làm việc này với CSS Clip.

http://bowdenweb.com/wp/2011/08/making-responsive-accessible-high-dpi-css-sprites.html

http://chiefalchemist.com/responsive-css-sprites-proof-of-concept-v0-1-0/

Answer 5

Nếu you'r ok để sử dụng một số JS, có thể, như đoạn này. Tôi sử dụng jquery nhưng bạn có thể chuyển đổi nó một cách dễ dàng trong js tinh khiết.

Tôi mở rộng tỷ lệ bằng cách tính tỷ lệ giữa chiều rộng của sprit và chiều rộng của nó. Tôi đặt một số lợi nhuận tiêu cực trên nó, bởi vì quy mô một div với tài sản biến đổi css thay đổi khía cạnh nhưng không phải là kích thước tính toán.

var $sprits = $('.sprit'); 
 
$sprits.each(function() { 
 
    
 
    $(this).data('originalWidth', $(this).width()); 
 
    $(this).data('originalHeight', $(this).height()); 
 
    $(this).data('originalParentHeight', $(this).parent().height()); 
 
}) 
 

 
function setSpritsScale() { 
 
    
 
    $sprits.each(function() { 
 
    
 
    ratio = $(this).parent().width()/$(this).data('originalWidth'); 
 
    marginWidth = $(this).data('originalWidth') - $(this).parent().width(); 
 
    marginHeight = $(this).data('originalHeight') - $(this).data('originalParentHeight') * ratio; 
 
    $(this).css({ 
 
     'transform': 'scale(' + ratio + ')', 
 
     'margin': (-marginHeight/2) + 'px ' + (-marginWidth/2) + "px" 
 
    }); 
 

 
    }) 
 
} 
 

 
$(window).resize(setSpritsScale); 
 

 
setSpritsScale();

.columns { 
 
    float: left; 
 
    width: 20%; 
 
} 
 
.sprit { 
 
    display: inline-block; 
 
    background-image: url('http://changlee.com.br/cascavel/wp-content/uploads/2013/10/sprite2l-500x500.jpg'); 
 
    background-repeat: no-repeat; 
 
    min-width: 75px; 
 
    min-height: 75px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="columns"> 
 
    <div class="sprit"></div> 
 
</div> 
 

 
<div class="columns"> 
 
    <div class="sprit"></div> 
 
</div> 
 
<div class="columns"> 
 
    <div class="sprit"></div> 
 
</div> 
 
<div class="columns"> 
 
    <div class="sprit"></div> 
 
</div> 
 
<div class="columns"> 
 
    <div class="sprit"></div> 
 
</div>