图像响应性在320x568中断

时间：2017-05-26 06:30:42

标签： html css

我的代码就像这样

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

一切都在较高分辨率下工作正常但是当它达到较低分辨率时会在主图像下方产生白色间隙，如图所示 enter image description here

我怎样才能克服这个？

2 个答案:

答案 0 :(得分：0)

由于您的图像具有响应性，因此您可以为图像添加高度，但这种方法会使图像失真。

示例1

＆＃13;
＆＃13; 
.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: 500px;
    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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

或使用具有背景覆盖属性的背景图像

示例2

＆＃13;
＆＃13; 
.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 {
    background: url('https://preview.ibb.co/nkY9oF/1.jpg') no-repeat center center / cover;
    width: 100%;
height: 500px;
    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;
}
＆＃13; 
<div class="fairdetailimg">
   <table width="100%" class="fairmonos">
      <tbody>
         <tr>
            <td width="70%">
               <div class="fairdet-image">
                  
               </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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我做了一些编辑，请查看下面的内容。

这就是我想说的Photoshop有用的地方。我会创建图像，然后相应地制作我的div，因为一些倾向于拉伸的图像看起来并不好看。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题