HTML hình ảnh tự động thay đổi kích thước bằng pixel và phần trăm trở ngại

Question

Làm thế nào tôi có thể thêm một hình ảnh đến một trang HTML bằng cách sử dụng những hạn chế sau:

• Không cho phép upscaling (nếu chiều rộng hình ảnh là 400 pixel Tôi không muốn thay đổi kích thước nó thành 600).
• Hình ảnh phải được hạ thấp nếu phần tử chứa nhỏ hơn hình ảnh.
• Giữ tỷ lệ cỡ ảnh.

Ví dụ: tôi có hình ảnh (400x300). Nếu phần tử chứa có chiều rộng 600 pixel, tôi muốn hiển thị hình ảnh ở 400x300. Nếu phần tử chứa có chiều rộng 200 pixel (ví dụ: trình duyệt dành cho thiết bị di động), tôi muốn hiển thị hình ảnh ở mức 200x150.

Tôi đang tìm một giải pháp CSS thuần túy (nếu có thể) mà không cần phải gắn dây cứng kích thước hình ảnh.

Answer 1

Sử dụng tài sản max-width hai lần làm việc một cách chính xác:

<div style="max-width: 400px" > 
<img src="image.jpg" style="max-width:100%;" /> 
</div> 

Answer 2

Bạn nên sử dụng max-width tài sản:

<div style="width:600px"> 
<img src="images/image.jpg" alt="image" style="max-width:100%;/>  
</div> 

Điều này sẽ hạn chế chiều rộng hình ảnh của mình vào phần tử div cha mẹ, giảm co giãn hình ảnh nếu cần thiết. Nó sẽ không mất tỷ lệ khung hình của nó hoặc tăng tỷ lệ hình ảnh. max-width được hỗ trợ trong tất cả các trình duyệt cập nhật nhưng không phải trong IE6

Answer 3

Nó không thu hẹp hình ảnh. - asalamon74

Tôi đã cắm mã của AdamY vào HTML của tôi và nó hạ thấp hình ảnh xuống. Dưới đây là một số ví dụ về kích thước hình ảnh tôi đã có: 800w x 626h, 962x640, 895x640. Đối với những cái này và những cái khác, nó thu nhỏ tất cả - nghĩa là sau khi thêm 'style = "max-width: 100%;"' vào thẻ img, hình ảnh vừa với chiều rộng của vùng chứa của tôi (# photo-container) và tỉ lệ. Không nói nó sẽ làm việc trong mã của bạn, nhưng nó làm việc cho tôi. Dưới đây là liên quan mã CSS/HTML của tôi:

CSS:

#photo-container {display:block; float:left; width: 800px; 
        margin-left:5px; margin-top:0px; 
        padding: 10px 10px 10px 10px; 
        background-color:black; color:white; 
        border-bottom-left-radius: 0.5em; 
        border-bottom-right-radius: 0.5em; 
       } 

HTML:

<div id="photo-container"> 
     <img id="photo-display" src="PlaceHolder" alt="PlaceHolder" 
     style="max-width:100%;"> 
    </div> 

Các hình ảnh được thực sự đặt sử dụng javascript. Quá trình lựa chọn trong mã javascript của tôi là một tiết chút cho chủ đề này, nhưng về cơ bản nó tương đương với:

photo-display.src=myimage; 

Tôi đã không thử nó với một bức ảnh có chiều rộng nhỏ hơn 800.

Answer 4

cần lưu ý rằng thẻ IMG của bạn cần có loại bỏ các width & tài sản Chiều cao, nếu không nó sẽ không quy mô đúng cách.

Answer 5

Bằng thẻ < img> mà không sử dụng hộp div, v.v.

img { 
width: auto; 
height: auto; 
max-width: 100%; 
}