gpt4 book ai didi

css - 如何定位溢出的图像?

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

我确实有一个固定高度的 div,其中包含一个高于 div 高度的图像。我想把这个图像放在 div 的中间,我使用 jquery-ui position()。但是图像被裁剪了,div 之外的内容没有显示。我试过 overflow-y: visible (overflow-x 必须隐藏)。我希望图像完全可见我想我遗漏了一些微不足道的东西。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Jeroen's Plaatjes Presentator</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$('#focus_img').position({my: 'center center', at: 'center center', of: '#panel_1'});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="scroll">
<div class="panel" id="panel_1">
<img src="images/middle/kameleon.png" alt="kameleon" id="focus_img" style="{width:239 height:160}"/>
</div>
</div>
</div>
</div>
<div id="content" style="margin-top:50px;margin-left:auto;">
<table width="100%">
<tr><td id="left" width="50%"><div class="stage"></div>
</td><td id="bright" width="50%"></td></tr>
</table>
</div>
</body>
</html>

CSS 看起来像:

#wrapper {
padding-top: 150px;
}
#slider {
position: relative;
}

.scroll {
overflow-x: hidden;
overflow-y: visible;
width: 100%;
margin: 0 auto;
position: relative;
border: 2px solid black;
height: 50px;
}

最佳答案

溢出是一件棘手的事情。一种选择是增加 div 高度以适合您的图像,然后显示: block ;或漂浮它。

您是否尝试过为 panel_1 设置溢出?

关于css - 如何定位溢出的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5197299/

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