0

ライトボックス内の 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 />
4

2 に答える 2

0

こんにちは、最大高さ/幅で遊んでいましたが、もう少し近づいています...

.fancyimg{
        max-height: 50%; max-width: 50%; display:block;
    margin:auto; margin-top: 25%;}
于 2013-07-21T21:23:32.493 に答える
0

私は問題を理解しました、私のコードを見てください。今では完全に正常に動作します。

.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); }
于 2013-07-21T21:56:51.180 に答える