Hình ảnh có thể xem có thể bị xóa trong các thẻ <img> giống như hình nền

Question

Sử dụng đồng bằng <img> thẻ có thể bù đắp hình ảnh giống như cách bạn có thể làm với hình nền CSS và vị trí nền không?

Có những hình ảnh chính trên trang và rất ít khi có hình thu nhỏ riêng biệt khi cả hai hình ảnh sẽ được tải (do đó tăng băng thông). Một số hình ảnh là chân dung và một số là cảnh quan, tuy nhiên tôi cần hiển thị hình thu nhỏ ở kích thước đồng nhất (và cắt bỏ phần thừa mà không đáp ứng được tỷ lệ cỡ ảnh mong muốn).

Mặc dù điều này có thể sử dụng các thẻ khác và giá trị CSS nền, việc sử dụng các thẻ <img> đơn giản sẽ thích hợp hơn.

Answer 1

Rất tiếc, không thể chỉ với thẻ <img>. Có 2 giải pháp tôi có thể nghĩ đến vấn đề của bạn:

CSS background-image

Tạo một <div> nơi hình ảnh được áp dụng như một tài sản background-image:

<div class="thumbnail" style="background: url(an-image.jpg) no-repeat 50% 50%"></div> 

CSS clipping

Sử dụng thuộc tính clip-path để chỉ hiển thị một phần của hình ảnh:

<!-- Clip properties are top, right, bottom, left and define a rectangle by its top-left and bottom-right points --> 
<div style="clip-path: inset(10px 200px 200px 10px)"> 
    <img src="an-image.jpg"> 
</div> 

Bạn có thể đọc thêm về nó in this article.

Answer 2

Nếu bạn đặt hình ảnh trong div, bạn có thể sử dụng lề để di chuyển hình ảnh xung quanh. Ví dụ cụ thể này sử dụng biểu tượng hình ảnh sprite cho liên kết trang chủ thay đổi vị trí khi di chuột. Bạn cũng có thể bỏ qua thẻ A và di chuyển hình ảnh xung quanh bằng cách sử dụng thuộc tính margin trên #logo img.

HTML:

<div id="logo"> 
    <a href="#"> 
     <img src="img/src.jpg" /> 
    </a> 
</div> 

CSS:

#logo { 
    display: block; 
    float: left; 
    margin: 15px 0; 
    padding: 0; 
    width: 350px; //portion of the image you wish to display 
    height: 50px; //portion of the image you wish to display 
    overflow: hidden; //hide the rest of the image 
} 
#logo img { 
    width: 350px; 
    height: 100px; // you'll see this is 2x the height of the viewed image 
    padding: 0; 
    margin: 0; 
} 
#logo a { 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
} 
#logo a:hover { 
    margin-top: -50px; //move up to show the over portion of the image 
} 

Hy vọng rằng sẽ giúp!

Answer 3

Trước

<img src="img.png"> Text, Links, Etc 

Sau:

<img src="img.png" style="float:left; margin-bottom:-5px"> Text, Links, Etc 

đọc về Block-Formatting bối cảnh trên W3C.

Answer 4

Một số ảnh chân dung và một số là ảnh ngang, tuy nhiên tôi cần hiển thị hình thu nhỏ ở kích thước đồng nhất (và cắt bỏ phần thừa không đáp ứng tỷ lệ khung hình mong muốn).

Sử dụng background-size: cover nên exactly solve that problem → với good browser support!

Và làm cho bạn hình ảnh nền (có thể sử dụng background-image như một phong cách inline):

<img style="background-image: url('img/foo.png')"/>