Question

我有一个用于图片库的css灯箱，在灯箱中打开的图片必须很大，以便他们的内容易于阅读。灯箱容器是固定的，但我需要图像在y轴上滚动。

我已经看到了这个问题：Scroll part of content in fixed position container，但是当我将解决方案添加到我的代码中时它没有用。我也看到了这个：How to make a "Fixed" element Scrollable，但我不想在我的代码中使用JavaScript。

我的代码是：

HTML

<!-- Lightbox usage markup -->
                <ul>
                    <li class="" id="portfolio_item">
                        <!-- thumbnail image wrapped in a link -->
                        <a href="#img1">
                            <img src="images/Templates/template_01/Template_01_thumb.png" width=""  height="150px">
                        </a>
                    </li>
                </ul>
                <!-- lightbox container hidden with CSS -->
                <a href="#_" class="lightbox" id="img1">
                    <img src="images/Templates/template_01/Template_01.png" class="lightbox_content">
                </a>

CSS

    /*************************************
 * Basic lightbox styles. Notice the
 * default 'display' is 'none'.
 */

.lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: auto;
  padding:10px;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  margin-top: 2%;
  overflow-y:scroll;
  height:100%;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

我意识到它必须是简单的东西，但我尝试了我能想到的一切，但它仍然无效。谢谢您的帮助。

更新：我将CSS更改为：

    .lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: auto;
  padding:10px;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox_content{
  /** Pad the lightbox image */
  max-width: 90%;
  width:auto;
  min-width:30%;
  margin-top: 2%;
  overflow-y:scroll;
  max-height:10000px;
  height:3623px; 

}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

但它仍然不会滚动。

Answer 1

请参阅CSS代码底部的注释以获得解释：

@RestController
class MyController {

    @Autowired
    private MyService myService; //If you use the spring sterotypes you dont need to do anything to use a bean but just to use the autowired annotation
}

@RestController
class AnyotherController extends AbstractController {...}

@RestController
class YetAnotherController extends AbstractController implements Something {}

/*************************************
 * Basic lightbox styles. Notice the
 * default 'display' is 'none'.
 */

.lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: auto;
  padding:10px;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  margin-top: 2%;
  overflow-y:scroll;
  height:100%;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

/*========== ADDED THIS ==========*/
.lightbox {
    width: 300px; /* set arbitrary dimensions */
    height: 300px;
    overflow: scroll; /* causes .lightbox to be scrollable if children overflow it */
}

.lightbox img {
    max-width: none; /* max-width: 90%; <---- don't set this (otherwise image will never overflow parent)*/
    margin-top: 2%;
    overflow-y: visible; /* overflow-y: scroll; <---- don't set this (images can't contain anythying, so nothing can overflow from them*/
    height: auto;  /* height: 100%; <---- don't set this (otherwise image will never overflow parent)*/
}

Answer 2

如果将min-width和/或min-height设置为图像CSS规则，如果最小图像大小大于灯箱显示大小，请使用强制溢出来设置滚动？

所以会发生什么情况是图像缩放到灯箱容器的90％，但它仍然等于或大于min-width，这意味着图像大小设置为此，然后可以使用滚动条滚动你已经拥有的CSS规则。

您可能也需要将这些（min-width）规则设置为!important。

使固定的Css灯箱内容可滚动

2 个答案: