Thay đổi img src trong thiết kế đáp ứng?

Tôi sắp viết mã một bố cục đáp ứng có thể chứa ba "trạng thái" khác nhau.Thay đổi img src trong thiết kế đáp ứng?

Phần kỳ quặc là phần lớn văn bản, ví dụ các mục menu sẽ là hình ảnh - không phải ý tưởng của tôi và đó là điều tôi không thể thay đổi được.

Vì hình ảnh sẽ khác một chút, ngoài kích thước, cho mỗi tiểu bang (ví dụ ở trạng thái nhỏ nhất, menu sẽ trở thành nút nổi thay vì tiêu đề thông thường), tôi sẽ cần chuyển hình ảnh thay vì chỉ chia tỷ lệ .

Nếu không có, tôi có thể đi với "adaptive-images.com".

Vì vậy, tôi cần một số đầu vào về giải pháp thực hành tốt nhất cho việc này.

gì tôi có thể nghĩ ra:

tải những hình ảnh làm nền - cảm thấy một chút bẩn thỉu.
Chèn cả hai phiên bản và chuyển đổi thuộc tính hiển thị css - rất bẩn thỉu!
Viết javascript đặt tất cả các liên kết img - cảm thấy một chút quá mức cần thiết?

Bất cứ ai ngồi trên một giải pháp tốt? :)

Nguồn

2012-05-03 jonas

Nghe như một công việc cho [CSS sprites] (http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/)? Bằng cách này, tất cả "hình ảnh mục menu" của bạn sẽ được chứa trong một hình ảnh được tải khi tải trang. – thirtydot

Nếu hình ảnh là nội dung và không phải là giao diện người dùng, việc tạo các sprites sẽ mất thời gian. –

Nếu đó chỉ là một vài hình ảnh (và chúng được tối ưu hóa) thì ẩn chúng qua CSS là không có vấn đề gì. Nếu đó là rất nhiều sau đó hãy xem Response JS mà sẽ thay đổi src trên bay cho bạn. Hãy thử điều này:

<body data-responsejs='{ "create": [ 
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] } 
]}'> 

<img src="small.png" data-min-width-481="medium.png" alt="example">

Đọc this article quá.

Cập nhật - thêm ví dụ:

<body data-responsejs='{ "create": [ 
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] } 
    , { "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2] } 
]}'> 

<img src="small.png" data-device-pixel-ratio-1.5="medium.png" alt="example">

Nguồn

2012-05-04 07:03:36 ryanve

Sẽ kiểm tra xem! Họ là một vài đến nhiều để cảm thấy thoải mái ẩn chúng hoặc làm một javascript hardcoded :) – jonas

Điều này là tuyệt vời! Cảm ơn! Nếu nó chỉ hỗ trợ hình ảnh thay thế cho màn hình võng mạc tôi sẽ ở trên thiên đường;) – jonas

@jonas Cool =] và có thực sự là một cách để làm điều đó bằng 'device-pixel-ratio' (thêm ví dụ ở trên) Nó cũng có thể sử dụng tiêu chí tùy chỉnh. Xem 'Response.dpr' và' Response.addTest' trong readme (https://github.com/ryanve/response.js) và một số ví dụ tổng quát hơn về https://github.com/ryanve/response.js/ wiki/làm thế nào để tạo-breakpoint-bộ Tôi thích sử dụng 'width' hoặc' device-width' như prop. – ryanve

gì tôi sẽ làm là:
hình ảnh dùng làm nền của mỗi phần tử li
tạo một sprite với các liên kết (hình ảnh) trong tất cả các kích cỡ:

___ ___ ___ ___ 
__ __ __ __ 
_ _ _ _

Thân, sử dụng @media ví dụ:.

@media only screen and (max-width : 480px) { 
/* here I would make my li smaller */ 
/* here I would just change the li background position*/ 
}

Hình ảnh 'sprite' sẽ được tải trong trình duyệt và quá trình chuyển đổi sẽ diễn ra suôn sẻ và nhanh chóng.

Nguồn

2012-05-03 21:28:40

Cảm ơn, đã nghĩ đến việc sử dụng nền css (có hoặc không có sprites), nhưng nó không cảm thấy một chút sai? Các hình ảnh chủ yếu là liên quan đến giao diện người dùng .. – jonas

Tôi không hiểu ý của bạn là gì khi nói giao diện người dùng có liên quan. Vui lòng giải thích. (Tôi hiểu rằng các hình ảnh sẽ là các nút điều hướng.) –

Đây là một ý tưởng khá hay, làm thế nào để bạn đối phó với tải sprite lớn? Tôi đang cố gắng tăng tốc trang web đáp ứng vào lúc này. – SpaceBeers

Tôi là fan hâm mộ của sự lựa chọn thứ 3, bởi vì nó không làm cho tải nhiều hình ảnh và tiết kiệm băng thông.

Do thiết kế điện thoại di động đầu tiên, đầu tiên tôi tải hình ảnh nhỏ như thế này:

<div id="mydiv"> 
    <img src="myphoto1_normal.jpeg" width="24" height="24" alt="myphoto1"/> 
    <img src="myphoto2_normal.jpeg" width="24" height="24" alt="myphoto2"/> 
</div>

Sau đó, sau khi tải tài liệu tôi chạy kịch bản này:

function resizeImages() { 
    var width = window.innerWidth || document.documentElement.clientWidth; 
    $("#mydiv img").each(function() { 
     var oldSrc = $(this).attr('src'); 
     if (width >= 768) { 
      var newSrc = oldSrc.replace('_normal.','_bigger.'); 
      var newWidth = 100; var newHeight = 100; 
     } else if (width >= 480) { 
      var newSrc = oldSrc.replace('_normal.','_big.'); 
      var newWidth = 50; var newHeight = 50; 
     } 
     $(this).attr('src',newSrc); 
     $(this).attr('width',newWidth); 
     $(this).attr('height',newHeight); 
    }); 
}

Nếu chiều rộng màn hình lớn sau đó tôi thay đổi hình ảnh nhỏ cho những hình ảnh lớn hơn với tập lệnh này. Nó chạy nhanh trên máy tính để bàn. Và nó không chạy trong điện thoại thông minh.

Nguồn

2013-04-27 14:57:02 trante

Tùy chọn khác. Không cần script, chỉ CSS.

HTML

<div id="mydiv"> 
    <img src="picture.png" class="image_full"> 
    <img src="picture_mobile.png" class="image_mobile"> 
</div>

CSS

.image_full{ 
    display:block; 
    } 

.image_mobile{ 
    display:none; 
} 

@media (max-width: 640px) and (min-width: 320px){ 
    .image_full{ 
    display:none; 
    } 

    .image_mobile{ 
    display:block; 
    } 
}

Nguồn

2015-03-12 17:30:28

Nó sẽ không hiển thị toàn bộ hình ảnh nhưng sẽ vẫn tải hình ảnh đó trong thiết bị di động, thường có băng thông hạn chế. –

Tôi thích cách tiếp cận rất tự nhiên này, cảm ơn! – mimic

Thanh lịch, Bị kẹt trên cái này trong 1/2 giờ! –

Hầu hết các trình duyệt ngày nay are supportingpicture thẻ. Vì vậy, bạn có thể sử dụng nó để thay đổi hình ảnh tùy thuộc vào chiều rộng khung nhìn.

<picture> 
    <source media="(min-width: 1200px)" srcset="/img/desktop-size.png"> 
    <source media="(min-width: 768px)" srcset="/img/medium-size.png"> 
    <img src="/img/mobile-size.png"/> 
</picture>

Nguồn

2017-10-29 15:47:12

Thay đổi img src trong thiết kế đáp ứng?

Trả lời

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