我的图片比一般的浏览器窗口还要宽。我想将其包含在可滚动的DIV
(或其他容器)中,该控件可独立于主窗口滚动而滚动。
我已经接近fiddle。
body {
padding: 20px;
font-family: Helvetica;
}
.scroll_box {
background-color: #586;
color: #000;
overflow-x: scroll;
/* this almost works but breaks the
layout of the parent elements. */
right: 0;
left: 0;
position: absolute;
}
.scrollable_img {}
<table class="wrapper" border=1>
<tr>
<td>
<div class="scroll_box">
<img class="scrollable_img" src="" width=2048 height=16\>
</div>
</td>
</tr>
</table>
但是您可以将可滚动容器的布局设置为绝对值,这破坏了其中包含的表的布局。页面的主体填充也将被忽略。
所以,我如何同时实现这一目标。
非常感谢能解决这个问题的任何人!
出于此答案的目的,我删除了表格的边框。如果您的图像比表格宽,则可以使用边框,如果不是,则表格上的边框会超出可滚动图片的尺寸。 (也许没关系..或者寻找解决方案)
为了使图像无论屏幕大小如何都可滚动,我添加了一个最大宽度(适用于包装盒,而不是图像),使用一个百分比-片段中的最大宽度为20%,但是您可以适当地放大它。
我还将overflow-x设置为auto,将overflow-y设置为隐藏(除非您也想向下滚动)。我在您的图片上添加了一个alt标签(这是一种很好的做法)。我还将您的位置设置为相对,并删除了绝对位置。绝对定位不利于响应式设计!
希望这会有所帮助
body {
padding: 20px;
font-family: Helvetica;
}
.scroll_box {
max-width: 20%;
max-height: 12vh;
background-color: #586;
border: 1px solid #000;
/* color: #000; what's this for?*/
overflow-x: auto;
overflow-y: hidden;
}
.scrollable_img {}
<table class="wrapper">
<tr>
<td>
<div class="scroll_box">
<img class="scrollable_img" src="http://www.rachelgallen.com/images/yellowflowers.jpg" alt="wide image">
</div>
</td>
</tr>
</table>