html - 图像响应在 320x568 中中断

Question

我的代码是这样的

.fairdetailimg {
    margin-bottom: 20px;
}
.fairmonos {
    border: 1px solid #ddd;
}
table {
    background-color: transparent;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
* {
    padding: 0;
    margin: 0;
}
.fairmonos td {
    vertical-align: top;
}
.fairdet-image, .fairdet-image img {
    width: 100%;
    overflow: hidden;
}
img {
    vertical-align: middle;
}
img {
    border: 0;
}
@media screen and (min-width: 1025px)
responsive.css:1800
td.fair-border {
    vertical-align: middle;
}
td.fair-border {
    vertical-align: middle;
    width: 30% !important;
    word-break: break-word;
}
.fair-border {
    border: 1px solid #ddd;
}
.fair-mono {
    text-align: center;
    font-size: 25px;
    margin-bottom: 15px;
    font-weight: 400;
}
.fairmonos .fair-img {
    width: 60%;
    margin: 10px auto;
    padding-top: 0px;
    overflow: hidden;
}

<div class="fairdetailimg">
   <table width="100%" class="fairmonos">
      <tbody>
         <tr>
            <td width="70%">
               <div class="fairdet-image">
                  <img src="https://preview.ibb.co/nkY9oF/1.jpg">
               </div>
            </td>
            <td class="fair-border" width="30%">
               <div class="fair-logoinfo">
                  <div class="fair-mono">
                     India Art Fair
                  </div>
                  <div class="fair-img">
                     <a href="#">
                     <img class="img-responsive" src="https://image.ibb.co/czDaTF/2.jpg">
                     </a>
                  </div>
                  <div class="fair-address">
                     <strong>Address: </strong>INDIA
                  </div>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
   <div class="clearfix"></div>
</div>

在较高分辨率下一切正常，但当它转到较低分辨率时，它会在主图像下方创建一个白色间隙，如图所示

我怎样才能克服这个问题？

Answer 1

我做了一些编辑，请查看下方。

我想说这就是 Photoshop 有用的地方。我会创建图像，然后相应地制作我的 div，因为有些图像往往会被拉伸(stretch)，看起来一点也不好。

.fairdetailimg {
    /*margin-bottom: 20px;*/
}
.fairmonos {
    border: 1px solid #ddd;
}
table {
    background-color: transparent;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
* {
    padding: 0;
    margin: 0;
}
.fairmonos td {
    vertical-align: top;
}
.fairdet-image, .fairdet-image img {
    width: 100%;
    height: 380px;
    overflow: hidden;
}
.fair-img{
width: 100%;
}
img {
    vertical-align: middle;
}
img {
    border: 0;
}
@media screen and (min-width: 1025px)
responsive.css:1800
td.fair-border {
    vertical-align: middle;
}
td.fair-border {
    vertical-align: middle;
    width: 30% !important;
    word-break: break-word;
}
.fair-border {
    border: 1px solid #ddd;
}
.fair-mono {
    text-align: center;
    font-size: 25px;
    margin-bottom: 15px;
    font-weight: 400;
}
.fairmonos .fair-img {
    width: 60%;
    margin: 10px auto;
    padding-top: 0px;
    overflow: hidden;
}

<div class="fairdetailimg">
   <table width="100%" class="fairmonos">
      <tbody>
         <tr>
            <td width="40%">
               <div class="fairdet-image">
                  <img src="https://preview.ibb.co/nkY9oF/1.jpg">
               </div>
            </td>
            <td class="fair-border" width="30%">
               <div class="fair-logoinfo">
                  <div class="fair-mono">
                     India Art Fair
                  </div>
                  <div class="fair-img">
                     <a href="#">
                     <img class="img-responsive" src="https://image.ibb.co/czDaTF/2.jpg">
                     </a>
                  </div>
                  <div class="fair-address">
                     <strong>Address: </strong>INDIA
                  </div>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
   <div class="clearfix"></div>
</div>