html - 位于灯箱内 div 内的图像的 CSS（许多层）

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

我发现了问题，请参阅我的代码。现在工作得很好。

.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); }

Answer 2

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

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