{"id":704,"date":"2025-01-03T22:56:59","date_gmt":"2025-01-03T14:56:59","guid":{"rendered":"https:\/\/www.laixuexila.com\/?p=704"},"modified":"2025-01-03T22:56:59","modified_gmt":"2025-01-03T14:56:59","slug":"%e5%9c%a8-html-%e5%92%8c-css-%e4%b8%ad%ef%bc%8c%e5%a6%82%e4%bd%95%e6%8e%a7%e5%88%b6%e5%9b%be%e5%83%8f%e6%98%be%e7%a4%ba%e6%96%b9%e5%bc%8f%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/www.laixuexila.com\/index.php\/2025\/01\/03\/%e5%9c%a8-html-%e5%92%8c-css-%e4%b8%ad%ef%bc%8c%e5%a6%82%e4%bd%95%e6%8e%a7%e5%88%b6%e5%9b%be%e5%83%8f%e6%98%be%e7%a4%ba%e6%96%b9%e5%bc%8f%ef%bc%9f\/","title":{"rendered":"\u5728 HTML \u548c CSS \u4e2d\uff0c\u5982\u4f55\u63a7\u5236\u56fe\u50cf\u663e\u793a\u65b9\u5f0f\uff1f"},"content":{"rendered":"\n
\n

\u5728 HTML \u548c CSS \u4e2d\uff0c\u56fe\u50cf\u586b\u5145\uff08image filling\uff09\u6307\u7684\u662f\u5982\u4f55\u63a7\u5236\u56fe\u50cf\u5728\u5143\u7d20\u4e2d\u7684\u663e\u793a\u65b9\u5f0f\uff0c\u7279\u522b\u662f\u5982\u4f55\u4f7f\u56fe\u50cf\u9002\u5e94\u5bb9\u5668\u7684\u5c3a\u5bf8\uff0c\u6216\u786e\u4fdd\u56fe\u50cf\u5728\u4e0d\u540c\u5c4f\u5e55\u6216\u89c6\u53e3\u4e2d\u4fdd\u6301\u826f\u597d\u7684\u6bd4\u4f8b\u548c\u663e\u793a\u6548\u679c\u3002\u56fe\u50cf\u586b\u5145\u901a\u5e38\u901a\u8fc7 CSS \u6765\u5b9e\u73b0\uff0c\u53ef\u4ee5\u4f7f\u7528 background-image<\/code>\u3001object-fit<\/code> \u7b49\u5c5e\u6027\u6765\u63a7\u5236\u56fe\u50cf\u7684\u663e\u793a\u65b9\u5f0f\u3002<\/p>\n<\/blockquote>\n\n\n\n

\n\n\n\n

1. \u4f7f\u7528 background-image<\/code> \u548c\u586b\u5145\u6548\u679c<\/strong><\/h3>\n\n\n\n

background-image<\/code> \u5c5e\u6027\u5141\u8bb8\u4f60\u5c06\u56fe\u50cf\u4f5c\u4e3a\u80cc\u666f\u5e94\u7528\u4e8e\u5143\u7d20\u3002\u901a\u8fc7\u914d\u5408\u5176\u4ed6\u80cc\u666f\u76f8\u5173\u7684\u5c5e\u6027\uff0c\u53ef\u4ee5\u63a7\u5236\u56fe\u50cf\u5982\u4f55\u586b\u5145\u5143\u7d20\u7684\u533a\u57df\u3002<\/p>\n\n\n\n

\u8bed\u6cd5\uff1a<\/h4>\n\n\n\n
element {\n    background-image: url('image.jpg');  \/* \u8bbe\u7f6e\u80cc\u666f\u56fe\u50cf *\/\n    background-size: cover;              \/* \u63a7\u5236\u56fe\u50cf\u586b\u5145\u65b9\u5f0f *\/\n    background-position: center;         \/* \u8bbe\u7f6e\u56fe\u50cf\u7684\u4f4d\u7f6e *\/\n    background-repeat: no-repeat;        \/* \u9632\u6b62\u56fe\u50cf\u91cd\u590d *\/\n}<\/code><\/pre>\n\n\n\n
\u5e38\u89c1\u7684 background-size<\/code> \u503c<\/strong>\uff1a<\/h4>\n\n\n\n
    \n
  • cover<\/code><\/strong>: \u4fdd\u8bc1\u80cc\u666f\u56fe\u50cf\u8986\u76d6\u6574\u4e2a\u5143\u7d20\uff0c\u56fe\u50cf\u53ef\u80fd\u4f1a\u88ab\u88c1\u526a\u4ee5\u9002\u5e94\u5143\u7d20\u7684\u5927\u5c0f\uff0c\u4f46\u4e0d\u4f1a\u62c9\u4f38\u56fe\u50cf\u3002<\/li>\n\n\n\n
  • contain<\/code><\/strong>: \u4fdd\u8bc1\u56fe\u50cf\u5b8c\u6574\u663e\u793a\u5728\u5143\u7d20\u5185\uff0c\u56fe\u50cf\u4f1a\u6839\u636e\u5bb9\u5668\u7684\u5927\u5c0f\u7f29\u653e\uff0c\u53ef\u80fd\u4f1a\u5728\u5143\u7d20\u5185\u7559\u4e0b\u7a7a\u767d\u533a\u57df\u3002<\/li>\n<\/ul>\n\n\n\n
    \u793a\u4f8b 1\uff1a\u4f7f\u7528 background-size: cover<\/code> \u586b\u5145\u80cc\u666f\u56fe\u50cf<\/strong><\/h3>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"zh\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u56fe\u50cf\u586b\u5145\u793a\u4f8b<\/title>\n    <style>\n        .image-container {\n            width: 100%;\n            height: 400px;\n            background-image: url('https:\/\/via.placeholder.com\/800x600'); \/* \u8bbe\u7f6e\u80cc\u666f\u56fe *\/\n            background-size: cover;    \/* \u4fdd\u8bc1\u56fe\u50cf\u8986\u76d6\u6574\u4e2a\u5bb9\u5668 *\/\n            background-position: center; \/* \u80cc\u666f\u56fe\u5c45\u4e2d *\/\n            background-repeat: no-repeat; \/* \u9632\u6b62\u56fe\u50cf\u91cd\u590d *\/\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"image-container\"><\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    \u89e3\u91ca<\/strong>\uff1a<\/p>\n\n\n\n
      \n
    • \u56fe\u50cf https:\/\/via.placeholder.com\/800x600<\/code> \u88ab\u4f5c\u4e3a\u80cc\u666f\u56fe\u5e94\u7528\u5230 div<\/code> \u5143\u7d20\u4e0a\u3002<\/li>\n\n\n\n
    • background-size: cover<\/code> \u786e\u4fdd\u56fe\u50cf\u8986\u76d6\u6574\u4e2a\u5bb9\u5668\u533a\u57df\uff0c\u5373\u4f7f\u56fe\u50cf\u7684\u5bbd\u9ad8\u6bd4\u4f8b\u4e0e\u5bb9\u5668\u4e0d\u4e00\u81f4\uff0c\u56fe\u50cf\u4e5f\u4f1a\u6309\u6bd4\u4f8b\u7f29\u653e\uff0c\u53ef\u80fd\u88ab\u88c1\u526a\u3002<\/li>\n\n\n\n
    • background-position: center<\/code> \u4fdd\u8bc1\u56fe\u50cf\u59cb\u7ec8\u5c45\u4e2d\u663e\u793a\u3002<\/li>\n<\/ul>\n\n\n\n
      \u8f93\u51fa<\/strong>\uff1a<\/p>\n\n\n\n
        \n
      • \u5728\u9875\u9762\u4e0a\u663e\u793a\u4e00\u4e2a 400px \u9ad8\u3001100% \u5bbd\u5ea6\u7684 div<\/code>\uff0c\u5176\u80cc\u666f\u56fe\u4f1a\u8986\u76d6\u6574\u4e2a\u533a\u57df\uff0c\u56fe\u50cf\u7684\u90e8\u5206\u533a\u57df\u53ef\u80fd\u88ab\u88c1\u526a\u3002<\/li>\n<\/ul>\n\n\n\n
        \u793a\u4f8b 2\uff1a\u4f7f\u7528 background-size: contain<\/code> \u586b\u5145\u80cc\u666f\u56fe\u50cf<\/strong><\/h3>\n\n\n\n
        <!DOCTYPE html>\n<html lang=\"zh\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u56fe\u50cf\u586b\u5145\u793a\u4f8b<\/title>\n    <style>\n        .image-container {\n            width: 100%;\n            height: 400px;\n            background-image: url('https:\/\/via.placeholder.com\/800x600'); \/* \u8bbe\u7f6e\u80cc\u666f\u56fe *\/\n            background-size: contain;  \/* \u4fdd\u8bc1\u56fe\u50cf\u5b8c\u5168\u663e\u793a *\/\n            background-position: center; \/* \u80cc\u666f\u56fe\u5c45\u4e2d *\/\n            background-repeat: no-repeat; \/* \u9632\u6b62\u56fe\u50cf\u91cd\u590d *\/\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"image-container\"><\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
        \u89e3\u91ca<\/strong>\uff1a<\/p>\n\n\n\n
          \n
        • background-size: contain<\/code> \u786e\u4fdd\u56fe\u50cf\u5728\u5bb9\u5668\u5185\u5b8c\u5168\u663e\u793a\uff0c\u56fe\u50cf\u4f1a\u6839\u636e\u5bb9\u5668\u7684\u5927\u5c0f\u7f29\u653e\uff0c\u4f46\u53ef\u80fd\u4f1a\u7559\u4e0b\u7a7a\u767d\u533a\u57df\u3002<\/li>\n\n\n\n
        • \u56fe\u50cf\u59cb\u7ec8\u4fdd\u6301\u5b8c\u6574\uff0c\u5e76\u4e14\u4e0d\u4f1a\u88ab\u88c1\u526a\u3002<\/li>\n<\/ul>\n\n\n\n
          \u8f93\u51fa<\/strong>\uff1a<\/p>\n\n\n\n
            \n
          • \u5728\u9875\u9762\u4e0a\u663e\u793a\u4e00\u4e2a 400px \u9ad8\u3001100% \u5bbd\u5ea6\u7684 div<\/code>\uff0c\u5176\u4e2d\u80cc\u666f\u56fe\u50cf\u7684\u5b8c\u6574\u90e8\u5206\u90fd\u4f1a\u663e\u793a\u51fa\u6765\uff0c\u53ef\u80fd\u4f1a\u6709\u7a7a\u767d\u533a\u57df\u3002<\/li>\n<\/ul>\n\n\n\n
            \n\n\n\n
            2. \u4f7f\u7528 object-fit<\/code> \u5728 <img><\/code> \u6807\u7b7e\u4e2d\u586b\u5145\u56fe\u50cf<\/strong><\/h3>\n\n\n\n
            \u5728 <img><\/code> \u6807\u7b7e\u4e2d\uff0cobject-fit<\/code> \u5c5e\u6027\u7528\u4e8e\u63a7\u5236\u56fe\u50cf\u5982\u4f55\u586b\u5145\u5176\u7236\u5143\u7d20\uff08\u5982 div<\/code>\uff09\u7684\u5927\u5c0f\u3002\u8fd9\u4e2a\u5c5e\u6027\u5e38\u7528\u4e8e\u63a7\u5236\u56fe\u50cf\u7684\u81ea\u9002\u5e94\u663e\u793a\uff0c\u5c24\u5176\u662f\u5728\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u4e2d\u3002<\/p>\n\n\n\n
            \u5e38\u89c1\u7684 object-fit<\/code> \u503c<\/strong>\uff1a<\/h4>\n\n\n\n
              \n
            • fill<\/code><\/strong>: \u56fe\u50cf\u4f1a\u62c9\u4f38\u6216\u538b\u7f29\u4ee5\u9002\u5e94\u7236\u5143\u7d20\u7684\u5c3a\u5bf8\uff0c\u53ef\u80fd\u4f1a\u5bfc\u81f4\u56fe\u50cf\u5931\u771f\u3002<\/li>\n\n\n\n
            • contain<\/code><\/strong>: \u56fe\u50cf\u4f1a\u7f29\u653e\u4ee5\u9002\u5e94\u7236\u5143\u7d20\uff0c\u4fdd\u6301\u5b8c\u6574\u663e\u793a\uff0c\u53ef\u80fd\u4f1a\u6709\u7a7a\u767d\u533a\u57df\u3002<\/li>\n\n\n\n
            • cover<\/code><\/strong>: \u56fe\u50cf\u4f1a\u8986\u76d6\u6574\u4e2a\u7236\u5143\u7d20\uff0c\u53ef\u80fd\u4f1a\u88ab\u88c1\u526a\u3002<\/li>\n\n\n\n
            • none<\/code><\/strong>: \u56fe\u50cf\u4e0d\u4f1a\u7f29\u653e\uff0c\u539f\u59cb\u5c3a\u5bf8\u663e\u793a\uff0c\u53ef\u80fd\u8d85\u51fa\u7236\u5143\u7d20\u3002<\/li>\n\n\n\n
            • scale-down<\/code><\/strong>: \u56fe\u50cf\u6839\u636e\u539f\u59cb\u5c3a\u5bf8\u548c contain<\/code>\u3001cover<\/code> \u7684\u8981\u6c42\u8fdb\u884c\u7f29\u653e\u3002<\/li>\n<\/ul>\n\n\n\n
              \u793a\u4f8b 1\uff1a\u4f7f\u7528 object-fit: cover<\/code> \u586b\u5145 <img><\/code> \u56fe\u50cf<\/strong><\/h3>\n\n\n\n
              <!DOCTYPE html>\n<html lang=\"zh\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u56fe\u50cf\u586b\u5145\u793a\u4f8b<\/title>\n    <style>\n        .image-container {\n            width: 100%;\n            height: 400px;\n            overflow: hidden;  \/* \u9632\u6b62\u56fe\u50cf\u8d85\u51fa\u5bb9\u5668 *\/\n        }\n\n        img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover; \/* \u56fe\u50cf\u586b\u5145\u6574\u4e2a\u5bb9\u5668\uff0c\u53ef\u80fd\u88c1\u526a *\/\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"image-container\">\n        <img src=\"https:\/\/via.placeholder.com\/800x600\" alt=\"\u793a\u4f8b\u56fe\u50cf\">\n    <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
              \u89e3\u91ca<\/strong>\uff1a<\/p>\n\n\n\n
                \n
              • object-fit: cover<\/code> \u4f7f\u56fe\u50cf\u5728\u5176\u7236\u5bb9\u5668\u4e2d\u6309\u6bd4\u4f8b\u7f29\u653e\uff0c\u4ee5\u786e\u4fdd\u56fe\u50cf\u586b\u6ee1\u6574\u4e2a\u5bb9\u5668\uff0c\u4f46\u53ef\u80fd\u4f1a\u88c1\u526a\u6389\u56fe\u50cf\u7684\u4e00\u90e8\u5206\u3002<\/li>\n\n\n\n
              • width: 100%<\/code> \u548c height: 100%<\/code> \u786e\u4fdd\u56fe\u50cf\u5b8c\u5168\u586b\u5145\u5bb9\u5668\u7684\u5c3a\u5bf8\u3002<\/li>\n\n\n\n
              • overflow: hidden<\/code> \u9632\u6b62\u56fe\u50cf\u8d85\u51fa\u5bb9\u5668\u8303\u56f4\u3002<\/li>\n<\/ul>\n\n\n\n
                \u8f93\u51fa<\/strong>\uff1a<\/p>\n\n\n\n
                  \n
                • \u56fe\u50cf\u586b\u5145\u6574\u4e2a\u5bb9\u5668\uff0c\u53ef\u80fd\u4f1a\u88ab\u88c1\u526a\uff0c\u786e\u4fdd\u5bb9\u5668\u5b8c\u5168\u88ab\u56fe\u50cf\u8986\u76d6\u3002<\/li>\n<\/ul>\n\n\n\n
                  \u793a\u4f8b 2\uff1a\u4f7f\u7528 object-fit: contain<\/code> \u586b\u5145 <img><\/code> \u56fe\u50cf<\/strong><\/h3>\n\n\n\n
                  <!DOCTYPE html>\n<html lang=\"zh\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u56fe\u50cf\u586b\u5145\u793a\u4f8b<\/title>\n    <style>\n        .image-container {\n            width: 100%;\n            height: 400px;\n        }\n\n        img {\n            width: 100%;\n            height: 100%;\n            object-fit: contain; \/* \u56fe\u50cf\u4fdd\u6301\u6bd4\u4f8b\uff0c\u5b8c\u6574\u663e\u793a *\/\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"image-container\">\n        <img src=\"https:\/\/via.placeholder.com\/800x600\" alt=\"\u793a\u4f8b\u56fe\u50cf\">\n    <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
                  \u89e3\u91ca<\/strong>\uff1a<\/p>\n\n\n\n
                    \n
                  • object-fit: contain<\/code> \u4fdd\u8bc1\u56fe\u50cf\u5b8c\u6574\u663e\u793a\uff0c\u53ef\u80fd\u4f1a\u7559\u4e0b\u7a7a\u767d\u533a\u57df\u3002<\/li>\n\n\n\n
                  • \u56fe\u50cf\u6839\u636e\u5bb9\u5668\u5927\u5c0f\u81ea\u52a8\u7f29\u653e\uff0c\u4fdd\u6301\u56fe\u50cf\u7684\u6bd4\u4f8b\u3002<\/li>\n<\/ul>\n\n\n\n
                    \u8f93\u51fa<\/strong>\uff1a<\/p>\n\n\n\n
                      \n
                    • \u56fe\u50cf\u5b8c\u6574\u663e\u793a\u5728\u5bb9\u5668\u5185\uff0c\u53ef\u80fd\u4f1a\u7559\u4e0b\u7a7a\u767d\u533a\u57df\uff0c\u786e\u4fdd\u56fe\u50cf\u4e0d\u4f1a\u88ab\u88c1\u526a\u3002<\/li>\n<\/ul>\n\n\n\n
                      \n\n\n\n
                      \u603b\u7ed3<\/strong><\/h3>\n\n\n\n
                        \n
                      • background-image<\/code><\/strong> \u7528\u4e8e\u4e3a\u5143\u7d20\u8bbe\u7f6e\u80cc\u666f\u56fe\u50cf\u3002\u53ef\u4ee5\u914d\u5408 background-size: cover<\/code> \u548c background-size: contain<\/code> \u6765\u63a7\u5236\u56fe\u50cf\u7684\u586b\u5145\u65b9\u5f0f\uff0c\u524d\u8005\u4fdd\u8bc1\u56fe\u50cf\u8986\u76d6\u6574\u4e2a\u5bb9\u5668\uff0c\u540e\u8005\u4fdd\u8bc1\u56fe\u50cf\u5b8c\u5168\u663e\u793a\u3002<\/li>\n\n\n\n
                      • object-fit<\/code><\/strong> \u7528\u4e8e <img><\/code> \u6807\u7b7e\uff0c\u5141\u8bb8\u4f60\u63a7\u5236\u56fe\u50cf\u5728\u5bb9\u5668\u4e2d\u7684\u9002\u5e94\u65b9\u5f0f\u3002cover<\/code> \u4f1a\u88c1\u526a\u56fe\u50cf\u4ee5\u9002\u5e94\u5bb9\u5668\uff0ccontain<\/code> \u4f1a\u4fdd\u8bc1\u56fe\u50cf\u5b8c\u6574\u663e\u793a\uff0c\u53ef\u80fd\u7559\u6709\u7a7a\u767d\u533a\u57df\u3002<\/li>\n<\/ul>\n\n\n\n
                        \u8fd9\u4e24\u79cd\u65b9\u6cd5\u5206\u522b\u7528\u4e8e\u80cc\u666f\u56fe\u50cf\u548c\u666e\u901a\u56fe\u50cf\uff0c\u5728\u8bbe\u8ba1\u54cd\u5e94\u5f0f\u7f51\u7ad9\u65f6\u975e\u5e38\u5b9e\u7528\uff0c\u53ef\u4ee5\u786e\u4fdd\u56fe\u50cf\u5728\u4e0d\u540c\u5c4f\u5e55\u548c\u5bb9\u5668\u5c3a\u5bf8\u4e0b\u59cb\u7ec8\u663e\u793a\u5f97\u5f53\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
                        \u5728 HTML \u548c CSS \u4e2d\uff0c\u56fe\u50cf\u586b\u5145\uff08image filling\uff09\u6307\u7684\u662f\u5982\u4f55\u63a7\u5236\u56fe\u50cf\u5728\u5143\u7d20\u4e2d\u7684\u663e\u793a\u65b9\u5f0f\uff0c\u7279\u522b […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[],"class_list":["post-704","post","type-post","status-publish","format-standard","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/comments?post=704"}],"version-history":[{"count":1,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/704\/revisions"}],"predecessor-version":[{"id":705,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/704\/revisions\/705"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}