{"id":6317,"date":"2018-01-03T18:12:22","date_gmt":"2018-01-03T10:12:22","guid":{"rendered":"https:\/\/sdeno.com:80\/?p=6317"},"modified":"2019-04-18T18:20:35","modified_gmt":"2019-04-18T10:20:35","slug":"css3-%e5%9b%be%e7%89%87-object-fit","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=6317","title":{"rendered":"css3 \u56fe\u7247 object-fit"},"content":{"rendered":"

img \u81ea\u9002\u5e94 \u56fe\u7247 css3\u00a0\u56fe\u7247 \u65b0\u95fb\u56fe\u7247 \u56fe\u7247 \u7b49\u6bd4\u4f8b \u88c1\u526a \u5e03\u5c40 \u81ea\u9002\u5e94 \u5b9a\u4f4d \u81ea\u9002\u5e94\u5c45\u4e2d \u5782\u76f4\u5c45\u4e2d<\/p>\n

object-fit\u64cd\u4f5c\u662f\u4fdd\u8bc1\u56fe\u7247\u4e0d\u4f1a\u7834\u574f\u6bd4\u4f8b\u60c5\u51b5\u4e0b\u8fdb\u884c<\/p>\n

\/\/\u4fdd\u8bc1\u7b49\u6bd4\u4f8b\u663e\u793a\u51fa\u5168\u56fe\u5185\u5bb9\uff0c<\/span>
\n1\uff0c\u5bbd\u6bd4\u9ad8\u5927\u65f6\uff1a\u5bbd100%,\u9ad8auto
\n2, \u9ad8\u6bd4\u5bbd\u5927\u65f6\uff1a\u9ad8100%\uff0c\u5bbdauto
\n\u4f18\u70b9\uff1a\u56fe\u7247\u5185\u5bb9\u663e\u793a\u5b8c\u5168
\n\u7f3a\u70b9\uff1a\u5c31\u662f\u5bb9\u5668\u4f1a\u7559\u90e8\u5206\u7a7a\u767d
\nobject-fit: contain;<\/p>\n

\u5b9a\u4f4d\uff1a
\n\u914d\u5408object-position:50% 50%\u4f7f\u7528\u53ef\u4ee5\u79fb\u52a8\u56fe\u7247\u4f4d\u7f6e<\/p>\n

 <\/p>\n

\/\/\u4fdd\u8bc1\u586b\u6ee1\u5bb9\u5668<\/span>
\n\u4f18\u70b9\uff1a\u56fe\u7247\u5360\u6ee1\u5bb9\u5668\uff0c\u4e0d\u4f1a\u7559\u7a7a\u767d\u5904
\n\u7f3a\u70b9\uff1a\u56fe\u7247\u90e8\u5206\u4f1a\u88ab\u88c1\u526a
\nobject-position: cover<\/p>\n

 <\/p>\n

 <\/p>\n

\/\/\u4fdd\u8bc1\u586b\u6ee1\u5bb9\u5668\u53c8\u4e0d\u4f1a\u88ab\u88c1\u526a<\/span>
\n\u7f3a\u70b9\uff1a\u7834\u574f\u56fe\u7247\u6bd4\u4f8b\uff0c\u56fe\u7247\u626d\u66f2\uff08\u4e0d\u63a8\u8350\uff09
\nobject-fit: fill;<\/p>\n

 <\/p>\n

\u6848\u4f8b\uff1a<\/p>\n

<div style=\"height: 200px;width: 200px;background: pink;\">\r\n  <img src=\"mm.jpg\" style=\"object-fit: contain<\/span>;width: 100%; height: 100%;\">\r\n<\/div><\/pre>\n
 <\/p>\n
<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2018\/01\/img_edit.jpg\"<\/figure>\n
img_edit<\/a><\/p>\n
http:\/\/www.zhangxinxu.com\/study\/201503\/css3-object-fit.html<\/a><\/p>\n
 <\/p>\n
\u7528js\u5b9e\u73b0\uff0cobject-fit: contain\u6548\u679c<\/p>\n
 <\/p>\n
 \/******\u6700\u5b8c\u7f8e\u89e3\u51b3 \u56fe\u7247\u5728\u56fe\u7247\u6846\u5185\u6309\u5bbd\u9ad8\u6bd4\u4f8b\u81ea\u52a8\u7f29\u653e\uff01\uff01\uff01***\/\r\n\/\/Img:\u8981\u653e\u56fe\u7247\u7684img\u5143\u7d20\uff0conload\u65f6\u4f20\u53c2\u53ef\u7528this\r\n\r\n\/\/maxHeight :img\u5143\u7d20\u7684\u9ad8\u5ea6\uff0c\u50cf\u7d20\uff08\u56fe\u7247\u6846 \u6700\u5927\u9ad8\u5ea6\uff09\r\n\r\n\/\/maxWidth:img\u5143\u7d20\u7684\u5bbd\u5ea6\uff0c\u50cf\u7d20\uff08\u56fe\u7247\u6846 \u6700\u5927\u5bbd\u5ea6\uff09\r\nfunction AutoSize(Img, maxWidth, maxHeight) {\r\n   var image = new Image();\r\n   \/\/\u539f\u56fe\u7247\u539f\u59cb\u5730\u5740\uff08\u7528\u4e8e\u83b7\u53d6\u539f\u56fe\u7247\u7684\u771f\u5b9e\u5bbd\u9ad8\uff0c\u5f53<img>\u6807\u7b7e\u6307\u5b9a\u4e86\u5bbd\u3001\u9ad8\u65f6\u4e0d\u53d7\u5f71\u54cd\uff09\r\n   image.src = Img.src; \r\n   \/\/ \u5f53\u56fe\u7247\u6bd4\u56fe\u7247\u6846\u5c0f\u65f6\u4e0d\u505a\u4efb\u4f55\u6539\u53d8 \r\n   if (image.width < maxWidth&& image.height < maxHeight) {\r\n      Img.width = image.width;\r\n      Img.height = image.height;\r\n   }\r\n   else \/\/\u539f\u56fe\u7247\u5bbd\u9ad8\u6bd4\u4f8b \u5927\u4e8e \u56fe\u7247\u6846\u5bbd\u9ad8\u6bd4\u4f8b,\u5219\u4ee5\u6846\u7684\u5bbd\u4e3a\u6807\u51c6\u7f29\u653e\uff0c\u53cd\u4e4b\u4ee5\u6846\u7684\u9ad8\u4e3a\u6807\u51c6\u7f29\u653e\r\n   {\r\n      if (maxWidth\/ maxHeight <= image.width \/ image.height) \/\/\u539f\u56fe\u7247\u5bbd\u9ad8\u6bd4\u4f8b \u5927\u4e8e \u56fe\u7247\u6846\u5bbd\u9ad8\u6bd4\u4f8b\r\n      {\r\n         Img.width = maxWidth; \/\/\u4ee5\u6846\u7684\u5bbd\u5ea6\u4e3a\u6807\u51c6\r\n         Img.height = maxWidth* (image.height \/ image.width);\r\n      } \r\n      else { \/\/\u539f\u56fe\u7247\u5bbd\u9ad8\u6bd4\u4f8b \u5c0f\u4e8e \u56fe\u7247\u6846\u5bbd\u9ad8\u6bd4\u4f8b\r\n         Img.width = maxHeight * (image.width \/ image.height);\r\n         Img.height = maxHeight ; \/\/\u4ee5\u6846\u7684\u9ad8\u5ea6\u4e3a\u6807\u51c6\r\n      }\r\n   }\r\n\r\n}\r\n\r\n\r\n\u8c03\u7528\uff1a\r\n<img onload=\"AutoSize(this, $(this).width(), $(this).height())\">\r\n\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
img \u81ea\u9002\u5e94 \u56fe\u7247 css3\u00a0\u56fe\u7247 \u65b0\u95fb\u56fe\u7247 \u56fe\u7247 \u7b49\u6bd4\u4f8b \u88c1\u526a \u5e03\u5c40 \u81ea\u9002\u5e94 \u5b9a\u4f4d \u81ea\u9002\u5e94\u5c45\u4e2d \u5782\u76f4\u5c45\u4e2d  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-6317","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/6317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6317"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/6317\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}