html - 位于灯箱内 div 内的图像的 CSS(许多层)

Question

我在了解位于灯箱内的 div 中的图像尺寸时遇到了一些问题。所以要分解它:

1个灯箱名为 lhc 和 rhc 的灯箱中的 2 列图像位于 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%;}