基于设备高度的假响应背景的宽度？

时间：2019-01-05 13:30:08

标签： html css

我有一个图库，它使用1024x768px的大小作为主图像。 画廊显示正常，除了一种情况。如果不加载主图像（＃original-picture），则图库将仅显示垂直缩略图（将折叠）。

是否可以制作与＃original-picture行为完全相同的假白色背景（以防止画廊倒塌）？因此，在横向模式下具有100％的高度，在1024x768px内具有相同的宽高比吗？

这是我制作的https://jsfiddle.net/Adyyda/t1akegcd/13/演示，因此您可以调整区域的大小并查看其行为，以及隐藏主图像时会发生什么。

<div class="modal-background show-modal">
  <div class="modal1">
    <div class="modal-content">
      <div class="enlarge_picture_modal_holder_viewport ">
        <span class="close-button">×</span>
        <div id="image-background"></div>
        <img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" id="original-picture" alt="" width="" height="">
        <div class="enlarge_picture_modal_holder_thumbs">
          <ul class="clearfix thumbs_nav">
            <li id="picture1modal" class="1 active vis on" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture2modal" class="1 vis" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture3modal" class="1 vis" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture4modal" class="1 vis" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture5modal" class="2" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture6modal" class="2" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture7modal" class="2" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

ol,
ul {
  list-style: none;
}

.modal-background {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 9998;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transition: visibility 0 linear 0, opacity .25s 0, transform .25s;
  z-index: 9999;
}

.modal1 {
  transition: visibility 0 linear .25s, opacity .25s 0, transform .25s;
  position: fixed;
  z-index: 10000;
  max-width: 100%;
  max-height: 100%;
}

.modal-content {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.close-button {
  position: absolute;
  z-index: 9999;
  right: 0;
  padding: 0 10px;
  background: #dedede;
  font-size: 20px;
  cursor: pointer;
}

.enlarge_picture_modal_holder_viewport img {
  display: block;
  border: 1px solid #dedede;
}

.enlarge_picture_modal_holder_thumbs {
  position: relative;
  background: white;
}

.enlarge_picture_modal_holder_thumbs ul {
  overflow-x: hidden;
  overflow-y: auto;
  width: 66px;
  height: 100%;
  flex-direction: column;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

.enlarge_picture_modal_holder_thumbs li {
  width: 64px;
  height: 64px;
}

.enlarge_picture_modal_holder_thumbs li span {
  width: 64px;
  height: 64px;
  float: left;
}

.enlarge_picture_modal_holder_viewport img {
  display: block;
  border: 1px solid #dedede;
}

@media only screen and (orientation: landscape) {
  .modal1 {
    width: auto;
    height: 768px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .modal-content {
    height: 100%;
  }
  .enlarge_picture_modal_holder_viewport {
    height: 100%;
    display: flex;
    flex-direction: row;
  }
  .enlarge_picture_modal_holder_viewport img {
    order: 2;
    max-height: 100%;
    height: auto;
  }
  .enlarge_picture_modal_holder_thumbs {
    order: 1;
    width: 65px;
    height: 100%;
  }
  .enlarge_picture_modal_holder_thumbs ul {
    overflow-x: hidden;
    overflow-y: auto;
    width: 66px;
    height: 100%;
    flex-direction: column;
  }
  .enlarge_picture_modal_holder_thumbs li {
    margin-bottom: 5px;
  }
}

@media only screen and (orientation: portrait) {
  .modal1 {
    width: 1024px;
    height: auto;
    left: 50%;
    top: 8%;
    transform: translate(-50%, 8%);
  }
  .modal-content {
    width: 100%;
  }
  .enlarge_picture_modal_holder_viewport {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .enlarge_picture_modal_holder_viewport img {
    order: 1;
    max-width: 100%;
    height: auto;
  }
  .enlarge_picture_modal_holder_thumbs {
    order: 2;
    width: 100%;
    height: 65px;
  }
  .enlarge_picture_modal_holder_thumbs ul {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: 66px;
    flex-direction: row;
  }
  .enlarge_picture_modal_holder_thumbs li {
    margin-right: 5px;
  }
}

2 个答案:

答案 0 :(得分：0)

可以。想法是将一个元素的高度设置为零，然后将顶部或底部填充设置为百分比。该百分比将是元素宽度的百分比。乍一看，这是违反直觉的，但这是一个相当广泛使用的技巧。该容器元素将保持长宽比。然后，您可以绝对定位一个占用容器内空间的子元素。

apiVersion: v1
kind: Service
metadata:
  name: eureka-service
spec:
  type: LoadBalancer
  ports:
    - port: 8761
      targetPort: 8761
  selector:
    app: eureka-naming-server

.aspect-ratio-4x3 {
  height: 0;
  padding-top: 75%;
  background: red;
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: yellow;
}

答案 1 :(得分：0)

找到了解决方案，以防其他人需要它https://jsfiddle.net/Adyyda/t1akegcd/70/

我通过http://png-pixel.com制作了1024x768px的背景图像，并将其添加到主图像之后。另外，我在＃original-picture中添加了position：absolute，以便两个图像都具有相同的位置，并且现在可以使用了。如果我禁用了真实图像，将显示白色图像，并保持画廊外观。 

<div class="modal-background show-modal">
  <div class="modal1">
    <div class="modal-content">
      <div class="enlarge_picture_modal_holder_viewport ">
        <span class="close-button">×</span>
        <img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" id="original-picture" alt="" width="" height="">

        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAMACAQAAAAQs92GAAAJ2UlEQVR42u3WMQEAAAgDINc/9GzhI6Qg7QAAz0QAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAQAAEAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAAARAAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAEAABAAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAEQAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAABAAAQAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAABEAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAQAAEAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAAARAAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAABAAAAAAQAABAAAEAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAABAAAEAAAQAAAQAAAAAEAAAQAABAAAEAAAAABAAAEAAAQAABAAAAAAQAAriyc1/1MrIW2lQAAAABJRU5ErkJggg==">
        <div class="enlarge_picture_modal_holder_thumbs">
          <ul class="clearfix thumbs_nav">
            <li id="picture1modal" class="1 active vis on" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture2modal" class="1 vis" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture3modal" class="1 vis" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture4modal" class="1 vis" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture5modal" class="2" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture6modal" class="2" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
            <li id="picture7modal" class="2" onclick="javascript:;"><span><a href="javascript:;"><img src="http://images2.fanpop.com/images/photos/7800000/the-male-lion-all-about-lions-7875244-1024-768.jpg" alt="thumb"></a></span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

ol,
ul {
  list-style: none;
}
#image-background {
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .7);
  opacity: 1;
  visibility: visible;
  transition: visibility 0 linear 0, opacity .25s 0, transform .25s;
  z-index: 9999;
}

.modal1 {
  transition: visibility 0 linear .25s, opacity .25s 0, transform .25s;
  position: fixed;
  z-index: 10000;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.modal-content {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background: black;
  justify-content: center;
}
.close-button {

    position: relative;
    z-index: 9999;
    padding: 0 10px;
    background: #dedede;
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    right: -40px;

}

#image-background {
  display: inline-block;
}

.enlarge_picture_modal_holder_viewport img {
  max-height: 100%;
  max-width: 100%;
  display: inline-block;
  border: 1px solid #dedede;
}
.enlarge_picture_modal_holder_viewport img#original-picture {
  position: absolute;
}
.enlarge_picture_modal_holder_thumbs {
  position: relative;
  background: white;
  display: inline-block;
}

.enlarge_picture_modal_holder_thumbs ul {
  display: flex;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

.enlarge_picture_modal_holder_thumbs li {
  width: 64px;
  height: 64px;
}

.enlarge_picture_modal_holder_thumbs li span {
  width: 64px;
  height: 64px;
  float: left;
}


@media only screen and (orientation: landscape) {
  .modal1 {
    width: auto;
    height: 768px;
    /*left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);*/
  }
  .modal-content {
    height: 100%;
  }
  .enlarge_picture_modal_holder_viewport {
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
  }
  .enlarge_picture_modal_holder_viewport img {
    order: 2;
    max-height: 100%;
    height: auto;
  }
  .enlarge_picture_modal_holder_thumbs {
    order: 1;
    width: 65px;
    height: 100%;
    vertical-align: top;
  }
  .enlarge_picture_modal_holder_thumbs ul {
    overflow-x: hidden;
    overflow-y: auto;
    width: 66px;
    height: 100%;
    flex-direction: column;
    padding:0;
    margin: 0;
  }
  .enlarge_picture_modal_holder_thumbs li {
    margin-bottom: 5px;
  }
}

@media only screen and (orientation: portrait) {
  .modal1 {
    width: 1024px;
    height: auto;
    left: 50%;
    top: 8%;
    transform: translate(-50%, 8%);
  }
  .modal-content {
    width: 100%;
  }
  .enlarge_picture_modal_holder_viewport {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .enlarge_picture_modal_holder_viewport img {
    order: 1;
    max-width: 100%;
    height: auto;
  }
  .enlarge_picture_modal_holder_thumbs {
    order: 2;
    width: 100%;
    height: 65px;
  }
  .enlarge_picture_modal_holder_thumbs ul {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: 66px;
    flex-direction: row;
  }
  .enlarge_picture_modal_holder_thumbs li {
    margin-right: 5px;
  }
}
相关问题
最新问题