Kích thước hình ảnh có nên được xác định trong thuộc tính chiều cao/chiều rộng của thẻ img hoặc trong CSS không?

Question

Thực hành mã hóa có tốt hơn để xác định kích thước hình ảnh trong các thuộc tính width và height của thẻ không?

<img src="images/academia_vs_business.png" width="740" height="382" alt="" /> 

Hoặc trong kiểu CSS có chiều rộng/chiều cao?

<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" /> 

Hoặc cả hai?

<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" /> 

Answer 1

Tôi sẽ chống lại hạt ở đây và nêu rõ nguyên tắc tách nội dung khỏi bố cục (điều này sẽ biện minh cho câu trả lời đề xuất sử dụng CSS) không phải lúc nào cũng áp dụng cho chiều cao và chiều rộng hình ảnh.

Mỗi hình ảnh có chiều cao và chiều cao bẩm sinh, bẩm sinh có thể được lấy từ dữ liệu hình ảnh. Trong khuôn khổ của nội dung vs bố cục, tôi sẽ nói rằng thông tin chiều cao và chiều rộng bắt nguồn này là nội dung, không phải bố cục và do đó sẽ được hiển thị dưới dạng HTML làm thuộc tính phần tử.

Điều này giống như văn bản alt, cũng có thể được cho là bắt nguồn từ hình ảnh. Điều này cũng hỗ trợ ý tưởng rằng một tác nhân người dùng tùy ý (ví dụ: một trình duyệt thoại) phải có thông tin đó để liên kết nó với người dùng. Ít nhất, tỷ lệ khung hình có thể hữu ích ("hình ảnh có chiều rộng là 15 và chiều cao là 200"). Các tác nhân người dùng như vậy sẽ không nhất thiết phải xử lý bất kỳ CSS nào.

Thông số kỹ thuật cho biết các thuộc tính width và height cũng có thể được sử dụng để ghi đè chiều cao và chiều rộng được chuyển tải trong tệp hình ảnh thực tế. Tôi không đề nghị họ được sử dụng cho việc này. Để ghi đè chiều cao và chiều rộng, tôi tin rằng CSS (nội tuyến, nhúng hoặc bên ngoài) là cách tiếp cận tốt nhất.

Vì vậy, tùy thuộc vào những gì bạn muốn làm, bạn sẽ chỉ định một và/hoặc khác. Tôi nghĩ lý tưởng, chiều cao và chiều rộng ban đầu sẽ luôn được chỉ định là thuộc tính phần tử HTML, trong khi thông tin về kiểu dáng sẽ được tùy ý chuyển tải trong CSS.

Answer 2

Chắc chắn không phải cả hai. Ngoài ra tôi phải nói đó là sở thích cá nhân. Tôi muốn sử dụng css nếu tôi có nhiều hình ảnh có cùng kích thước để giảm mã.

.my_images img {width: 20px; height:20px} 

Trong CSS dài hạn có thể giành chiến thắng ra do deprecation thuộc tính HTML và nhiều khả năng do sự tăng trưởng của các định dạng hình ảnh vector như SVG, nơi nó thực sự có thể làm cho tinh thần để mở rộng hình ảnh sử dụng các đơn vị phi-pixel dựa như% hoặc em.

Answer 3

<img id="uxcMyImageId" src"myImage" width="100" height="100" /> 

chỉ định chiều rộng và chiều cao trong thẻ hình ảnh là một cách thực hiện tốt ... khi trang tải không gian được phân bổ cho hình ảnh và bố cục không bị giật bất kỳ ngay cả khi hình ảnh mất nhiều thời gian để tải.

Answer 4

Mặc dù bạn có thể sử dụng kiểu nội tuyến, mục đích của bạn có thể được phục vụ tốt hơn bằng cách bao gồm tệp CSS bên ngoài trên trang. Bằng cách này, bạn có thể xác định một lớp hình ảnh (tức là 'Hình thu nhỏ', 'Ảnh', 'Lớn', v.v.) và gán cho nó một kích thước không đổi. Điều này sẽ giúp khi bạn kết thúc với hình ảnh yêu cầu cùng một vị trí trên nhiều trang.

Như thế này:

 
In your header: 
<link type="text/css" rel="stylesheet" href="css/style.css" /> 

Your HTML: 
<img class="thumbnail" src="images/academia_vs_business.png" alt="" /> 

In css/style.css: 
img.thumbnail { 
    width: 75px; 
    height: 75px; 
} 

Nếu bạn muốn sử dụng phong cách nội tuyến, mặc dù nó có thể là tốt nhất để thiết lập chiều rộng và chiều cao bằng cách sử dụng thuộc tính style vì lợi ích của khả năng đọc.

Answer 5

Lý do lịch sử để xác định chiều cao/chiều rộng trong thẻ là để trình duyệt có thể kích thước các phần tử thực tế <img> trong trang ngay cả trước khi tài nguyên CSS và/hoặc hình ảnh được tải. Nếu bạn không cung cấp chiều cao và chiều rộng một cách rõ ràng, phần tử <img> sẽ được hiển thị ở 0x0 cho đến khi trình duyệt có thể kích thước nó dựa trên tệp. Khi điều này xảy ra, nó sẽ gây ra hiện tượng trực quan của trang khi hình ảnh tải và được kết hợp nếu bạn có nhiều hình ảnh trên trang. Định kích thước <img> thông qua chiều cao/chiều rộng tạo trình giữ chỗ thực trong luồng trang ở kích thước chính xác, cho phép nội dung của bạn tải không đồng bộ mà không làm gián đoạn trải nghiệm người dùng. Cách khác, nếu bạn đang thực hiện thiết kế phản hồi trên thiết bị di động, đây là phương pháp hay nhất trong những ngày này, việc xác định chiều rộng (hoặc chiều rộng tối đa) chỉ và xác định chiều cao là auto. Bằng cách đó, khi bạn xác định truy vấn phương tiện (ví dụ: CSS) cho độ rộng màn hình khác nhau, bạn có thể điều chỉnh chiều rộng hình ảnh và cho phép trình duyệt xử lý chính xác tỷ lệ chiều cao/hình ảnh chính xác. Đây là một phương pháp tiếp cận nền tảng trung bình, vì bạn có thể nhận được một số chỉnh lại, nhưng nó cho phép bạn hỗ trợ một loạt các kích thước màn hình, vì vậy lợi ích thường vượt quá tiêu cực.

Cuối cùng, có lúc bạn có thể không biết kích thước hình ảnh trước (hình src có thể được tải động hoặc có thể thay đổi trong suốt thời gian của trang qua tập lệnh).

Điểm mấu chốt ở đây là bạn cần phải hiểu những sự cân bằng và quyết định chiến lược nào có ý nghĩa nhất đối với những gì bạn đang cố gắng đạt được.

Answer 6

Tùy chọn a. fwd thẳng đơn giản. Những gì bạn thấy là những gì bạn nhận được dễ dàng để thực hiện các phép tính.

Tùy chọn b. Quá lộn xộn để làm điều này nội tuyến trừ khi bạn muốn có một trang web có thể kéo dài. IE nếu bạn sử dụng with:86em tuy nhiên các trình duyệt hiện đại dường như xử lý chức năng này đầy đủ cho mục đích của tôi ... Cá nhân thời gian duy nhất mà tôi sẽ sử dụng một cái gì đó như thế này là nếu tôi đã tạo một danh mục hình thu nhỏ.

/*css*/ 
ul.myThumbs{} 
ul.myThumbs li {float:left; width:50px;} 
ul.myThumbs li img{width:50px; height:50px;border:0;} 

<!--html--> 
<ul><li> 
<img src="~/img/products/thumbs/productid.jpg" alt="" /> 
</li></ul> 

Tùy chọn c. Quá lộn xộn để duy trì.

Answer 7

Tôi đang sử dụng contentEditable để cho phép chỉnh sửa văn bản có định dạng trong ứng dụng của mình. Tôi không biết làm thế nào nó phiếu thông qua, nhưng khi một hình ảnh được chèn vào, và sau đó thay đổi kích cỡ (bằng cách kéo neo ở thành của nó), nó tạo ra một cái gì đó như thế này:

<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/> 

(thử nghiệm tiếp theo cho thấy rằng chèn hình ảnh không chứa tham số attr + param "rogue" này.

Khi trình duyệt (IE7) hiển thị, chiều rộng và chiều cao theo kiểu ghi đè tham số chiều rộng/chiều cao img (vì vậy hình ảnh được hiển thị như cách tôi muốn .. thay đổi kích thước thành 55px x 55px.

Khi tôi xuất trang thành tài liệu MS-word thông qua cài đặt ứng dụng loại mime/msword hoặc dán trình duyệt hiển thị vào tài liệu msword, tất cả các hình ảnh được hoàn nguyên về kích thước mặc định của nó. msword sẽ loại bỏ kiểu và sử dụng thẻ chiều rộng và chiều cao img (có giá trị của kích thước hình ảnh gốc).

Đã cho tôi một thời gian để tìm ra điều này. Dù sao ... Tôi đã mã hóa một hàm javascript để duyệt qua tất cả các thẻ và "chuyển" các giá trị style.width img và style.height vào img.width và img.height, sau đó xóa cả hai giá trị theo kiểu, trước khi tôi tiếp tục lưu phần dữ liệu html/richtext này vào cơ sở dữ liệu.

cổ vũ.

opps .. câu trả lời của tôi là .. không. để cả hai thuộc tính trực tiếp dưới img, chứ không phải kiểu.