Tốt "nền-kích thước: bao gồm" fallbacks/shims/thủ thuật cho khả năng tương thích trình duyệt chéo trên DIV?

Vì vậy, tôi đang sử dụng background-size:cover để đạt được hiệu quả mong muốn của hình nền có tỷ lệ với bất kỳ kích thước nào của div mà nó được áp dụng trong khi duy trì tỷ lệ khung hình. Tại sao sử dụng phương pháp này? Hình ảnh đang được áp dụng làm nền sử dụng CSS nội tuyến, động qua PHP, dựa trên những gì đang được đặt làm hình ảnh trong bài đăng WordPress tương ứng.Tốt "nền-kích thước: bao gồm" fallbacks/shims/thủ thuật cho khả năng tương thích trình duyệt chéo trên DIV?

Vì vậy, mọi thứ hoạt động tốt, nhưng có bất kỳ dự phòng nào để đảm bảo điều này sẽ hoạt động trong ít nhất IE8 không? Có thể một số bản sửa lỗi Javascript?

Đã thử backstretch và supersized, nhưng không có kết quả, vì chúng chỉ áp dụng hình ảnh cho nền của trang.

Bạn có thể thấy nó hoạt động over here.

Nguồn

2012-02-17 Angel Marino

Trong IE8 hoặc thấp hơn, một hình ảnh foreground chèn như con của một div với định nghĩa chiều rộng/chiều cao sẽ là cách giải quyết duy nhất:

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Dynamic Image Sizing</title> 
<style type="text/css"> 
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left; } 
#pseudobg { position:absolute; z-index:1; width:100%; height:100%; } 
#scroller { position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2; } 
#dyndiv { position: absolute; left: 50%; width: 200px; height: 300px; } 
</style> 
</head> 
<body> 

<div id="scroller"> 
    <!-- Insert your content here --> 
    <div id="dyndiv"> 
    <img id="pseudobg" src="http://www.stackoverflow.com/favicon.ico" alt="" title="" /> 
    </div> 
</div> 
</body> 
</html>

Nếu đó không phải là tương đương, hãy hỏi Stu Nicholls để được giúp đỡ thêm.

Demo:

enter image description here

Nguồn

2012-03-13 22:20:44

Tôi đã thử các câu trả lời trước và nó đã không làm việc như background-kích thước: bìa; dự kiến, nó đã làm trong thực tế phù hợp với hình ảnh vào kích thước được lựa chọn, nhưng nó đã không clip vượt quá các biện pháp mới đó là những gì tôi mong đợi từ "bao gồm" tùy chọn. Giải pháp của tôi đã được tìm thấy ở đây: http://selectivizr.com/

<html> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<script type="text/javascript" src="[JS library]"></script> 
<!--[if (gte IE 6)&(lte IE 8)]> 
    <script type="text/javascript" src="path/to/selectivizr.js"></script> 
    <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> 
<![endif]--> 

<style> 
    .with-bg-size 


    { 
     background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); 
     background-position: center; 
     /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img1.jurko.net/wall/paper/donald_duck_4.jpg',sizingMethod='scale'); 
it didnt work as cover is expected */ 
     width: 200px; 
     height: 100px; 


     /* Make the background image cover the area of the <div>, and clip the excess */ 
     background-size: cover; 

     } 


    </style> 
    <body> 

<div class="with-bg-size">Donald Duck!</div> 

</body> 
</html>

Nguồn

2013-05-08 13:12:20 Sultanos

Nếu bạn cần phải thu nhỏ kích thước của hình ảnh của bạn, chứ không phải phát triển nó, phương pháp này không hoạt động. Cách tiếp cận tốt nhất tôi đã tìm thấy tránh Javascript là chồng lên nhau hai hình ảnh trên đầu trang của mỗi khác, trên di chuột làm cho một trong những đầu minh bạch. Tất cả các phương pháp khác liên quan đến việc thay đổi kích thước bản gốc (ví dụ: background-size) dường như không thành công trong IE.

CSS:

.social-btn-container { 
    width:46px; 
    height:46px; 
    position:relative; 
    float: left; 
    margin-right: 15px; 
} 
.social-btn-container:hover > .top-btn { 
    visibility:hidden; 
} 
.social-btn { 
    margin:0; 
    padding:0; 
    border:0; 
    width: 46px; 
    height: 46px; 
    position: absolute; 
    left:0; 
    top:0; 
} 
.top-btn { 
    z-index: 1; 
} 
.top-btn:hover { 
    opacity: 0; 
}

HTML:

<div class="social-btn-container"> 
    <a href="http://www.facebook.com/comunidadintiwarayassi" target="_blank" title="follow us on facebook"> 
     <img src="images/icons/facebook_top.png" class="top-btn social-btn" /> 
     <img src="images/icons/facebook_bottom.png" class="social-btn" /> 
    </a> 
</div>

Phần .social-btn-container:hover > .top-btn được làm việc này trong IE quirks mode, mà dường như không hỗ trợ opacity, và nếu bạn sử dụng :hover{visibility:hidden} di chuột trở nên sai khi khả năng hiển thị bị ẩn, gây nhấp nháy. (Các div bên ngoài cũng vị trí các hình ảnh.) Tôi đã thử nghiệm này trong FF23, IE tiêu chuẩn và quirks (nhận được IE 10 để thi đua 7, 8 và 9), Opera và Safari.

Nguồn

2013-09-16 20:51:57 Chris

Trong IE8 hoặc dưới sử dụng tách mã background::

-webkit Ví dụ:

background: url('img/habesha.jpg') no-repeat center center; 
-webkit-background-size: cover;

- trong IE thử:

background-image:url('img/bright_switch.jpg'); 
background-repeat: no-repeat; 
background-position: 50% 50%; 
background-size: 100% 100%;

Xem thêm chi tiết ở đây: https://msdn.microsoft.com/en-us/library/jj127316(v=vs.85).aspx

Nguồn

2017-01-10 13:14:58

Tốt "nền-kích thước: bao gồm" fallbacks/shims/thủ thuật cho khả năng tương thích trình duyệt chéo trên DIV?

Trả lời

Các vấn đề liên quan