HTML 5 màn hình thích ứng hình ảnh img mã tỷ lệ tỷ lệ cho trang web HTML XNUMX

Do Internet di động bùng nổ,Tiếp thị qua wechatSự phổ biến của điện thoại di động đã trở thànhCuộc sốngcông cụ phải có.

xây dựng một trang webmẫu, nó được khuyến khích sử dụngWordPressChủ đề thích ứng cho:

CSS thích ứng hình ảnh có nghĩa là gì?

CSS thích ứng hình ảnh có nghĩa là tạo hình ảnh trong trang web html, thông qua mã CSS:

Kế tiếp,Chen WeiliangMình sẽ chia sẻ với các bạn mã chia tỷ lệ CSS img ratio ^ _ ^

Mã thích ứng chiều cao và chiều rộng hình ảnh CSS

Chèn hình ảnh trong html:

Nếu bạn muốn hình ảnh thích ứng với kích thước nhỏ của màn hình thay vì giữ cố định về chiều rộng và chiều cao.

Bạn có thể thêm mã sau vào tệp style.css của chủ đề WordPress của mình ▼

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

tuyên bố ở đâymax-widthquy tắc chiều rộng tối đa

• để đảm bảo rằng tất cả các hình ảnh được hiển thị ở mức tối đa 100% (tức là chúng chỉ có thể được hiển thị lớn như hình ảnh của chính chúng).
• Tại thời điểm này, nếu phần tử chứa hình ảnh (ví dụ: phần nội dung hoặc div chứa hình ảnh) nhỏ hơn chiều rộng vốn có của hình ảnh, hình ảnh sẽ được thu nhỏ để lấp đầy không gian trống tối đa.

width:auto;có nghĩa là chiều rộng tự động

\9 Đó là một cách viết hack css.

• Bằng cách này, "\ 9" được thêm vào mã css thông thường, chỉ trình duyệt IE mới có thể nhận ra nó, các trình duyệt khác sẽ bỏ qua câu lệnh này.
• Điều này sẽ đạt được sự khác biệt của trình duyệt, cho phép mục đích của các trình duyệt tương thích.

Tại sao không sử dụng chiều rộng: 100%?

Để đạt được tỷ lệ tự động của hình ảnh, bạn cũng có thể sử dụng các thuộc tính chiều rộng được sử dụng phổ biến hơn, ví dụ:width：100％.

Tuy nhiên, quy tắc này không áp dụng ở đây.

• Bởi vì quy tắc này sẽ làm cho nó có vẻ rộng như vùng chứa của nó.
• Trong trường hợp vùng chứa rộng hơn nhiều so với hình ảnh, hình ảnh sẽ bị kéo giãn một cách không cần thiết.

注意 事项

Bộ chọn CSS là gì? Sự khác biệt giữa lớp và id là gì?Các bài hướng dẫn sau nói về ▼

Sự khác biệt giữa lớp CSS selector và id là gì? sử dụng id và lớp trong HTML

Sự khác biệt giữa lớp CSS selector và id là gì? Việc sử dụng id và class trong HTML Chen Weiliang hiện đang thực hiện SEO và tối ưu hóa chủ đề WordPress của trang web.Mặc dù tôi đã học một số kiến ​​thức cơ bản về HTML và CSS trước đó, nhưng tôi chưa vận hành nó trong một thời gian, đặc biệt là phần CSS ...

Làm thế nào để trang web di động phát video MP4 thích ứng với trang?Vui lòng nhấp vào liên kết bên dưới ▼

Trang web H5 MP4 thích ứng với trang như thế nào? Trang web trên thiết bị di động phát mã html video

Tiếp thị video là một phần không thể thiếu của tiếp thị trực tuyến: nhiều người thực hiện quảng cáo trực tuyến thường sử dụng video kết hợp với "tiếp thị lan truyền" để tăng lưu lượng truy cập.Nếu tiếp thị WeChat được kết hợp với tiếp thị video, nó có thể cải thiện hơn nữa tỷ lệ chuyển đổi viết quảng cáo của các phương tiện truyền thông mới và thương mại điện tử xã hội.Tôi có nhiều bạn bè...