@ truy vấn đa phương tiện và trao đổi hình ảnh

Question

Tôi mới sử dụng CSS và cho diễn đàn này. Nhưng tôi đã làm việc trên một dự án nhỏ, nơi tôi muốn hình ảnh trong trang web của tôi hoàn toàn thay đổi khi trình duyệt được thay đổi kích thước.

Tôi đã sử dụng truy vấn phương tiện? nhưng tôi dường như không thể làm đúng. bất kỳ suy nghĩ/mẹo nào?

Answer 1

Trong tương lai, vui lòng thêm mã bạn đã thử.

nếu đó là thẻ image bạn có thể sử dụng lớp học. Ẩn hình ảnh thứ hai trên tải trang và hiển thị + ẩn hình ảnh 1 tại một kích thước màn hình nhất định như vậy:

HTML

<img src="image.jpg" class="image1"/> 
<img src="image.jpg" class="image2"/> 

CSS

.image2{ 
    display: none; 
} 

@media only screen and (max-width: 500px){ //some value 
    .image1{ 
    display: none; 
    } 

    .image2{ 
    display: block; 
    } 
} 

EXAMPLE 1 - SHRINK BROWSER

HOẶC

Nếu đó là một background-image bạn chỉ có thể trao đổi các hình ảnh:

HTML

<div class="example"></div> 

CSS

.example{ 
    background-image: url("example.jpg"); 
} 

@media only screen and (max-width: 500px){ //some value 

    .example{ 
     background-image: url("example2.jpg"); 
    } 
} 

EXAMPLE 2 - SHRINK BROWSER

Answer 2

Bạn có thể sử dụng thuộc tính content để chèn hình ảnh của bạn. Tuy nhiên, hình ảnh được bao gồm như thế này có thể khó tạo kiểu. (Đoạn mã Run trên toàn màn hình trước khi thay đổi kích thước trình duyệt)

@media screen and (max-width: 479px) { 
 
    div img { 
 
     display:none; 
 
    } 
 
    div::before { 
 
     content: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66"); 
 
    } 
 
}

<p>Resize this window to see image change</p> 
 
<div> 
 
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="200px" /> 
 
</div>