html - 图片的 CSS 宽度和高度问题

标签 html css media-queries

我正在使用编码通过 Widget 在 Wordpress 中放置商店图片和链接。

一切都完成了，但我不知道为什么图像框变高了。

截图-

screenshot

我想做如下截图

screenshot

这是我直接在 wordpress 小部件中使用的内容:-

.go-home-stores {
  margin: 0 -4px
}
.coupon-store,
.go-home-stores a {
  display: block;
  border: 1px solid #dde1e4;
  margin-bottom: 8px;
  background-color: #fff;
  overflow: hidden;
  text-align: center
}
.go-home-stores a img {
  max-width: 100%;
  max-height: 100%
}
.go-home-stores a {
  line-height: 40px;
  height: 44px
}
.go-home-stores .gocol-4 {
  padding: 0 4px
}
.coupon-store {
  line-height: 30px;
  height: 36px
}
.coupons-list {
  padding: 1px 0;
  position: relative;
  overflow: hidden
}
.coupons-list h2 {
  margin-bottom: 8px;
  font-size: 16px
}
.coupons-list .coupon {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  margin-top: 0 !important;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .1), 0 3px 12px rgba(0, 0, 0, .04);
  padding: 10px 8px;
  position: relative;
  overflow: hidden;
  font-size: 15px;
  transition: .35s;
  -webkit-transition: .35s;
  -moz-transition: .35s;
  -o-transition: .35s
}
.coupons-list .coupon .coupon-box>div:last-child,
.coupons-list .coupon .coupon-click,
.coupons-list .coupon .gocol-6 {
  padding-right: 0
}
.coupons-list .coupon.swiped-left {
  border-right-width: 12px
}
.coupons-list .coupon.swiped-right {
  border-left-width: 12px
}
.coupons-list
</div>
<div class="go-home-stores">
  <div class="gocol-4">
    <a href="#" title="Mobikwik Coupons">
      <img src="image link here" alt="Mobikwik Coupons">
    </a>
  </div>
  <div class="gocol-4">
    <a href="#" title="Myles Car Coupons">
      <img src="image link here" alt="Myles Car Coupons">
    </a>
  </div>
  <div class="gocol-4">
    <a href="#" title="Shopclues Coupons">
      <img src="image link here" alt="Shopclues Coupons">
    </a>
  </div>
  <div class="gocol-4">
    <a href="#" title="Jabong Coupons">
      <img src="image link here" alt="Jabong Coupons">
    </a>
  </div>
  <div class="gocol-4">
    <a href="#" title="UBER Coupons">
      <img src="image link here" alt="UBER Coupons">
    </a>
  </div>
  <div class="gocol-4">
    <a href="#" title="Thrill Poker Coupons">
      <img src="image link here" alt="Thrill Poker Coupons">
    </a>
  </div>
  <div class="row-view-more">
    <div class="gocol-4">
      <a href="#" title="Freecharge Coupons">
        <img src="image link here" alt="Freecharge Coupons">
      </a>
    </div>
    <div class="gocol-4">
      <a href="#" title="Amazon Coupons">
        <img src="image link here" alt="Amazon Coupons">
      </a>
    </div>
    <div class="gocol-4">
      <a href="#" title="Paytm Coupons">
        <img src="image link here" alt="Paytm Coupons">
      </a>
    </div>
    <div class="gocol-4">
      <a href="#" title="Dominos Coupons">
        <img src="image link here" alt="Dominos Coupons">
      </a>
    </div>
    <div class="gocol-4">
      <a href="#" title="Swiggy Coupons">
        <img src="image link here" alt="Swiggy Coupons">
      </a>
    </div>
    <div class="gocol-4">
      <a href="#" title="Flipkart Coupons">
        <img src="image link here" alt="Flipkart Coupons">
      </a>
    </div>
  </div>
</div>
</div>

最佳答案

也许通过添加媒体查询。 JSFiddle

HTML:

<div class="go-home-stores"> 

<div class="gocol-4"> <a href="#" title="Mobikwik Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/mobikwik-1432618126498.jpeg" alt="Mobikwik Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Myles Car Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/mylescar.jpeg" alt="Myles Car Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Shopclues Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/shopclues-1457362077302.jpeg" alt="Shopclues Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Jabong Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/jabong-1432618184670.jpeg" alt="Jabong Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="UBER Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/uber-1454587308013.jpeg" alt="UBER Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Thrill Poker Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/thrillpoker.jpeg" alt="Thrill Poker Coupons"> </a> </div> <div class="row-view-more"> 

<div class="gocol-4"> <a href="#" title="Freecharge Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/freecharge-1458282310679.jpeg" alt="Freecharge Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Amazon Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/amazonindia-1437129803590.jpeg" alt="Amazon Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Paytm Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/paytm-1449060385177.jpeg" alt="Paytm Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Dominos Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/dominos.jpeg" alt="Dominos Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Swiggy Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/swiggy-1441182433677.jpeg" alt="Swiggy Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Flipkart Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/flipkart-1432804551875.jpeg" alt="Flipkart Coupons"> </a> </div>

旧 CSS:

    .go-home-stores{margin:0 -4px}.coupon-store,.go-home-stores a{display:block;border:1px solid #dde1e4;margin-bottom:8px;background-  color:#fff;overflow:hidden;text-align:center}.go-home-stores a img{max-width:100%;max-height:100%}.go-home-stores a{line-height:40px;height:44px}.go-home-stores .gocol-4{padding:0 4px}.coupon-store{line-height:30px;height:36px}.coupons-list{padding:1px 0;position:relative;overflow:hidden}.coupons-list h2{margin-bottom:8px;font-size:16px}.coupons-list .coupon{opacity:1;transform:scale(1);-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);margin-top:0 !important;background-color:#fff;border:1px solid #e5e5e5;box-shadow:0 2px 4px -1px rgba(0,0,0,.1),0 3px 12px rgba(0,0,0,.04);padding:10px 8px;position:relative;overflow:hidden;font-size:15px;transition:.35s;-webkit-transition:.35s;-moz-transition:.35s;-o-transition:.35s}.coupons-list .coupon .coupon-box>div:last-child,.coupons-list .coupon .coupon-click,.coupons-list .coupon .gocol-6{padding-right:0}.coupons-list .coupon.swiped-left{border-right-width:12px}.coupons-list .coupon.swiped-right{border-left-width:12px}.coupons-list

新 CSS:

.go-home-stores .gocol-4 {
    padding: 0 4px;
    display: inline-block;
    float: left;
}

  @media screen and (max-width:767px) {
    .gocol-4 {
    width:25%;
    float:left;
  }
}

关于html - 图片的 CSS 宽度和高度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38524887/

上一篇：html - 如何去除 Canvas 中的锯齿状线条？

下一篇：javascript - 如果达到限制，可移动的动态 Bootstrap Tab 菜单 slider

相关文章：

jquery - 动画切换滑动菜单

html - 每个页面上的 Django 页脚和页眉 {% extends }

javascript - 如何知道是否已在 angular ui typeahead 中选择了下拉列表中的元素？

html - 表格中的特定行布局

jquery - Bootstrap 响应侧边栏调整大小为小屏幕 <800px 中的图标菜单

javascript - 媒体查询的奇怪行为

html - 具有下拉列表 li 宽度的 css 菜单

html - 在打印页面上使用 Google Chrome 重复表格标题

jquery - 在输入的字段下设置动态创建的自动完成建议位置

CSS 媒体查询 - 应该在哪里定义它们？

©2024 IT工具网  联系我们