@媒体图像设计

Question

我在网站上工作，当设备宽度超过 425px (min-width: 425px) 时，我有两张图片需要 inline，但由于某些原因，它似乎无法正常工作应该是我的 css 和 @media 但由于某种原因它不起作用，尽管它是相当基本的

代码

.info-img {
  width: 49.75%;
}
.info-images {
  display: inline-block;
  text-align: center;
}
@media screen and only (max-width: 425px) {
  .info-img {
    width: 100%;
    padding-bottom: 1px;
  }
  .info-images {
    display: block;
    text-align: center;
  }
}

<div class="info-images">
  <img src="https://dl.dropboxusercontent.com/s/dd5exdwwpa13yxnthg/unspecified-4.jpeg?dl=0" class="info-img">
  <img src="https://dl.dropboxusercontent.com/s/fo3bt6ruhx4qppztho/unspecified-6.jpeg?dl=0" class="info-img">
</div>
</div>
<style type="text/css">
  @import url('https://dl.dropboxusercontent.com/s/ikcsorhvohzdipo/information.css?dl=0');
</style>

Answer 1

问题是因为你将 inline-block 给了 parent 而不是 img，而且你写错了媒体（不是 @media screen and only，而是 @media only screen and).

片段

.info-images {
  font-size: 0;
  /* fix inline-block gap */
}
.info-img {
  width: 50%;
  display: inline-block;
  vertical-align:top; /* may be necessary */
  box-sizing: border-box;
  padding: 0 1%
}
@media only screen and (max-width: 425px) {
  .info-img {
    width: 100%;
    padding-bottom: 1px;
  }
  .info-images {
    display: block;
    text-align: center;
  }
}

<div class="info-images">
  <img src="//lorempixel.com/1600/900" class="info-img">
  <img src="//lorempixel.com/1600/900" class="info-img">
</div>

@媒体图像设计

@Media for image design

html

css

media-queries

responsive-design

片段