gpt4 book ai didi

javascript - Webkit 错误在居中的绝对 div 中渲染图像

转载 作者:太空宇宙 更新时间:2023-11-04 10:58:31 25 4
gpt4 key购买 nike

编辑:我报告了错误 here

我遇到了 webkit 的一个错误,这让我很伤心。这是我的情况。我在居中绝对定位的 div 中有一个图像。我希望能够更改此 div 的父级的高度以使图像更改高度,但保留其纵横比和居中对齐。以下在 Firefox 中运行良好,但在 Chrome 中失败:

在文本框中输入高度并按回车键。这是发生了什么: chrome squishes and offsets the images

我正在寻找一种方法来强制 webkit 正确重绘布局。我还想确保它在 webkit 错误跟踪器中。

<!DOCTYPE html>
<html>
<head><title>Webkit bug</title></head>
<style>
#changesHeight {
position: relative;
}

#child {
position: absolute;
left: 50%;
height: 100%;
transform: translateX(-50%);
}
</style>
<body>
<div id="changesHeight" style="height: 200px;">
<div id="child">
<img style="height: 100%" src="data:image/gif;base64,R0lGODlhMgAyAIQQACYaElQgElEYbboUCg1LCZI8COQqOuFIBiyfx9GFLWSuC8ChQ92cf+K/CN23f+nKsP///////////////////////////////////////////////////////////////yH5BAEKABAALAAAAAAyADIAAAX+4COO5Micjvk4jMMmRcA8Z10bBW4cQ5uUQBGrpmoxEozCiXYyNBnOXeFwTPyCwKFotrIVvrObEwqd9hyJxhVb0m6FpxgXaqjXyweqOp1wsUlJXEwnAQFyTXaJU0pofH1+fyIyggKVljKJdgMDdXoHe2ouLCl/AjIilpUBAJiZmwMFPVagVqIppFiVTamVAHR1nAavAwkHVo7HaLa4JbzOAJnAm7F5eWp7jy5GkM3OqdCurzvVxse12X633d694QMBA+TV5o+PLaMlDOyX7vHyefTQ3VomAsE+VYmGkYu3I54VY8qQaBOlQMECGgcFuFvIY1OeL8nSKBvFYEFFAgD+Mib0yKPlMJC1IqJpsKziyYPiWMYbxtIYREc0Zy0YavPmN1OsePpTSK7YJx+NEiyQOpRAUZspAWjdmtRQx54AwwJsQNbRVJMKrKY9ybXtKq3+mvqUm4as3bImrapl27ZvAHlO5wF2cLcwWZt6+yqeMvefWIiGI999q5gVALmP/0mVzHmB4kKgYXC+hqT05sh1GywgO/XLKtAMfNVYPZqmOsKpVeueZeWL7xgBHgAQQWCEydq4opIm3ds3LNcMCEh/gPgBgusKOKd7IHWW6gUOFvxe5HqV9PNFr6tHQN3wRVJWho5CM5R8+bfSAUi/un599ru2DNXHMVPR9xtoWp3+h9JeNvW3XmG3AFVgH1PBABx+CjKImIPr0SYKb+dElQCCCeaHEgIaVsTheit82B19x1QRw1YZSsfAVemxiIWIFZpTgBUYmqgfAA7geJJ6kSBjRRKluaZfjUMauSF7fwTkY28BkIKikAigZeRFkXBHz48/YrlMCkKulh1BK4QJw5tXfrHdfAuglCUzWSR5DJkPydnmmWigJMgIkJCCJwm+FdMnGLa02AJ4VviCp6G3YQFAomV+Ad5ALIBXUkkJSJpFo20GoRWfzwEqCnhDBeBZAULEuqpt3JCglSEWuhrgUPKFV5J4RP7Zogus0nroreTJZ9FaVvEqXn2XGtoieA15FEUTeCWc6puXNUq3KQECirpMtVKCOYK2AXRbo0WtLrDKD6LQlJ2UFS0giLYKprVfjc66CwC2RdJ7Fbg0CAfavupmWOeIADxyFbn0uisCK+milzC/q1BrE8QCKyADAiWum/CTnv1rJMc4JgayxRdn+CQrKG/c8YkhAAA7" />
</div>
</div>
<input style="position: fixed; top: 0; left: 0" type="number" value="200">
<script>
document.getElementsByTagName('input')[0].onchange = function(a) {
document.getElementById('changesHeight').style.height = this.value + 'px';
};
</script>
</body>
</html>

最佳答案

无法实现跨浏览器的不一定是bug。尝试只使用外部容器和内部图像(而不是中间的另一个子容器),并允许图像自行调整大小:

<!DOCTYPE html>
<html>
<head><title>Webkit bug</title></head>
<style>
#changesHeight {
position: relative;
border : red solid 1px;
width : 100%;
height : 200px;
}

#changesHeight img {
position : absolute;
max-height : 100%;
height : 100%;
left : 50%;
transform : translateX(-50%);
border : blue dashed 1px;
}

.spacer {
height: 2000px;
}
</style>
<body>
<div id="changesHeight" style="height: 200px;">
<img src="data:image/gif;base64,R0lGODlhMgAyAIQQACYaElQgElEYbboUCg1LCZI8COQqOuFIBiyfx9GFLWSuC8ChQ92cf+K/CN23f+nKsP///////////////////////////////////////////////////////////////yH5BAEKABAALAAAAAAyADIAAAX+4COO5Micjvk4jMMmRcA8Z10bBW4cQ5uUQBGrpmoxEozCiXYyNBnOXeFwTPyCwKFotrIVvrObEwqd9hyJxhVb0m6FpxgXaqjXyweqOp1wsUlJXEwnAQFyTXaJU0pofH1+fyIyggKVljKJdgMDdXoHe2ouLCl/AjIilpUBAJiZmwMFPVagVqIppFiVTamVAHR1nAavAwkHVo7HaLa4JbzOAJnAm7F5eWp7jy5GkM3OqdCurzvVxse12X633d694QMBA+TV5o+PLaMlDOyX7vHyefTQ3VomAsE+VYmGkYu3I54VY8qQaBOlQMECGgcFuFvIY1OeL8nSKBvFYEFFAgD+Mib0yKPlMJC1IqJpsKziyYPiWMYbxtIYREc0Zy0YavPmN1OsePpTSK7YJx+NEiyQOpRAUZspAWjdmtRQx54AwwJsQNbRVJMKrKY9ybXtKq3+mvqUm4as3bImrapl27ZvAHlO5wF2cLcwWZt6+yqeMvefWIiGI999q5gVALmP/0mVzHmB4kKgYXC+hqT05sh1GywgO/XLKtAMfNVYPZqmOsKpVeueZeWL7xgBHgAQQWCEydq4opIm3ds3LNcMCEh/gPgBgusKOKd7IHWW6gUOFvxe5HqV9PNFr6tHQN3wRVJWho5CM5R8+bfSAUi/un599ru2DNXHMVPR9xtoWp3+h9JeNvW3XmG3AFVgH1PBABx+CjKImIPr0SYKb+dElQCCCeaHEgIaVsTheit82B19x1QRw1YZSsfAVemxiIWIFZpTgBUYmqgfAA7geJJ6kSBjRRKluaZfjUMauSF7fwTkY28BkIKikAigZeRFkXBHz48/YrlMCkKulh1BK4QJw5tXfrHdfAuglCUzWSR5DJkPydnmmWigJMgIkJCCJwm+FdMnGLa02AJ4VviCp6G3YQFAomV+Ad5ALIBXUkkJSJpFo20GoRWfzwEqCnhDBeBZAULEuqpt3JCglSEWuhrgUPKFV5J4RP7Zogus0nroreTJZ9FaVvEqXn2XGtoieA15FEUTeCWc6puXNUq3KQECirpMtVKCOYK2AXRbo0WtLrDKD6LQlJ2UFS0giLYKprVfjc66CwC2RdJ7Fbg0CAfavupmWOeIADxyFbn0uisCK+milzC/q1BrE8QCKyADAiWum/CTnv1rJMc4JgayxRdn+CQrKG/c8YkhAAA7" />
</div>

<input style="position: fixed; top: 0; left: 0" type="number" value="200">
<script>
document.getElementsByTagName('input')[0].onchange = function(a) {
document.getElementById('changesHeight').style.height = this.value + 'px';
};
</script>
</body>
</html>

关于javascript - Webkit 错误在居中的绝对 div 中渲染图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34506314/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com