Question

我遇到了一些问题让我的头围绕着一个位于灯箱内的div内的图像尺寸。所以要打破它：

1个灯箱灯箱中的2列名为lhc和rhc 图像位于lhc，但无论我使用％还是px，它都会扭曲拇指。

无论原始尺寸如何，图像都不会扭曲，但需要缩小并坐在lhc div的死角。

查看代码以及我在哪里出错：

.imagebox_container {
    height: 600px;
    width: 800px;
}
.fancybox-prev {
    width: 20%;
}
.fancybox-next {
    width: 20%;
    right: 400px;
}
.lhc {
    width: 500px;
    height: 100%;
    position: relative;
    float: left;
    display: block;
    background-color: #000;
}
.rhc {
    width: 300px;
    background-color: #FFF;
    height: auto;
    position: relative;
    overflow-y: scroll;
}
.fancyimg{
        height: 50%; width: 50%; display:block;
    margin:auto; margin-top: 25%;}

这是html / php：

    <div class="imagebox_container">
  <div class="lhc"><img class="fancyimg" src="uploads/folio/<?php echo $imgdata['filename']; ?>" /></div>
  <div class="rhc">
    <div id="imagedetails">
      <div id="imagedetails_useravatar"></div>
      <div id="imagedetails_username"></div>
    </div>
    <hr />
    <div id="likeboard"></div>
    <div id="commentboard">
      <?php /* Load comments */ ?>
      <?php while($row = mysqli_fetch_assoc($result_comments)){ ?>
      <div class="commentbox"><span class=""><span class="comment"><?php echo $row['comment']; ?></span></span></div>
      <hr />

Answer 1

嗨，我正在玩最大高度/宽度但是离我更近了......

.fancyimg{
        max-height: 50%; max-width: 50%; display:block;
    margin:auto; margin-top: 25%;}

Answer 2

我想出了问题，请参阅我的代码。现在工作完全正常。

.imagebox_container { height: 600px; width: 1000px; }
.fancybox-prev { width: 20%; }
.fancybox-next { width: 20%; right: 400px; }

.lhc { width: 700px;
       height: 100%;
       position: relative;
       float: left;
       display: block;
       background-image: url('/graphics/ps_neutral.png');
       clear: both;
       text-align: center; }     

.rhc { width: 300px;
       height: 100%;
       background-color: #FFF;
       height: auto;
       position: relative;  
       float: right;
       overflow-y: scroll; }

.fancyimg { max-height: 80%;
            max-width: 80%; 
            display:block;
            position:absolute;
            margin-top: 10%;
            margin-left: 70px;
            -moz-box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.7);
            -webkit-box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.7);
            box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.7); }

坐在灯箱内div内的图像的CSS（多层）

2 个答案: