要在具有窗口动态尺寸的容器中滚动图像吗?

问题描述 投票:0回答:2

我的图片比一般的浏览器窗口还要宽。我想将其包含在可滚动的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>

但是您可以将可滚动容器的布局设置为绝对值,这破坏了其中包含的表的布局。页面的主体填充也将被忽略。

enter image description here

所以,我如何同时实现这一目标。

  1. 保持相对布局,以使父母的大小都正确,并观察到身体的填充。
  2. 避免使用JavaScript,这需要嵌入不允许javascript的Wiki系统中。
  3. 动态地将可滚动容器的大小调整为窗口大小。
  4. 如果可能,解决方案应该能够处理未知尺寸的图像。

非常感谢能解决这个问题的任何人!

html css
2个回答
1
投票

如果我做对了,请使用以下样式向表添加包装器

position: relative;width: 100%;

将完成这项工作,我已经编辑了您的小提琴here


0
投票

出于此答案的目的,我删除了表格的边框。如果您的图像比表格宽,则可以使用边框,如果不是,则表格上的边框会超出可滚动图片的尺寸。 (也许没关系..或者寻找解决方案)

为了使图像无论屏幕大小如何都可滚动,我添加了一个最大宽度(适用于包装盒,而不是图像),使用一个百分比-片段中的最大宽度为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>
© www.soinside.com 2019 - 2024. All rights reserved.