<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
padding: 0;
margin: 0;
}
.container{
display: flex;
background-color: #222;
}
.box{
width: 300.691px;
height: 200px;
background-color: #fff;
margin-left: 100px;
/* margin-left: 101px; */
position: relative;
}
.box > img{
width:100%;
position: absolute;
left: 310.5px;
top: 20px;
transform: translate(-310.5px,-20px);
/* margin-left: -310.5px;
margin-top: -20px; */
}
</style>
</head>
<body>
<div class="container" >
<div class="box">
<img src="https://img.zcool.cn/community/0111b25567f7c90000016756157c55.jpg@900w_1l_2o_100sh.jpg" alt="">
</div>
</div>
</body>
</html>
<!--
测试设备
浏览器：Chrome
屏幕：devicePixelRatio=1
1. 当 left: 310.5px; transform: translate(-310.5px,-20px);时，
图片左右边会出现白色空隙。
2. 当 使用margin-left: -310.5px;代替translate,
并不会出现空隙
注意：在Firefox中 dvicePixelRatio无论是多少，该测试用例都没有出现白边
-->
<!--
问题关键词
transform subpixel rendering
参考博文
transform参考：
https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ （必看）
https://stackoverflow.com/questions/22097660/is-there-a-way-i-can-force-chrome-to-do-subpixel-rendering-for-a-slow-translatio
https://stackoverflow.com/questions/18257132/is-it-possible-to-snap-to-pixel-after-a-css-translate
subpixel参考：
https://www.pixafy.com/blog/css-subpixel-rendering/
https://en.wikipedia.org/wiki/Subpixel_rendering
https://www.cnblogs.com/Jessica-jie/p/8529564.html （必看）
-->
<!--
this is due to the absolute positioned macbook sticks to pixel positions,
whereas the translate() one can interpolate at sub-pixel positions.
top/left 是向像素对齐的，而translate2D是可以插入在亚像素的位置，向亚像素对齐
物理像素是最小的像素单位，在硬件设计时，物理像素(元件)之间是有间距的。
可以把物理像素从逻辑上分成更小的像素--称之为亚像素，这些像素不是实际物理元件能表示出来的，但是能通过软件算法方法近似表示。
一个物理像素可能表示2/3/4个亚像素，这取决于软件算法。
subpixel rendering: 不同于像素渲染，亚像素渲染能把渲染的长度精确到物理像素周边的亚像素
分析用例：
是用translate移动后，当图片的左右两边处在物理像素之间，此时采用sbupixel rendering, 因此和外部的容器盒子存在间距。
-->