文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >320x568图像响应中断

问320x568图像响应中断
EN

Stack Overflow用户
提问于 2017-05-26 06:30:41
回答 2查看 42关注 0票数 0

我的密码是这样的

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

在高分辨率下，一切都很好，但当分辨率降低时，就会在主图像下方产生一个白色的空白，如图中所示。

​

我怎样才能克服这一切？

css
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-05-26 07:24:29

我做了几次编辑，只是看看下面。

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

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2017-05-26 06:57:31

因为您的图像是响应的，您可以添加一个高度到您的图像，但这种方法将使您的图像扭曲。

示例1

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

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

示例2

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44195054

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档