Responsive image links in one row

Question

Updated photo I need help with images that are links. I need that 5 images stay in one row at all resultions by resizing. Theese 5 images must be sticked to sides of web. I hope somewho could help me, because i didn´t found anything yet.. Thanks

Image of my resultion, this is what it must look like on every resultion, of course smaller:

.gallery {
  max-width: 1615px;
  margin: 0 auto;
}
.photo img {
  width: 316.5px;
  height: 200px;
}
.photo a {
  float: left;
  text-align: center;
  position: relative;
  margin-bottom: 50px;
}
.rollover {
  opacity: 1;
  -o-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -webkit-transition: -webkit-transform 1s;
  background: url(img/plus.png) bottom right no-repeat rgb(28, 28, 28);
  cursor: pointer;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 1;
  opacity: 0;
}
.rollover:hover {
  opacity: .7;
  -o-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -webkit-transition: -webkit-transform 1s;
  -webkit-box-shadow: 0px 0px 4px #000;
  -moz-box-shadow: 0px 0px 4px #000;
  box-shadow: 0px 0px 4px #000;
}
#roll-text,
#roll-date {
  text-decoration: none;
  color: #fff;
  width: 250px;
  text-align: left;
  margin-left: 20px;
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 14px;
}
#roll-text {
  margin-top: 70px;
}
#roll-date {
  margin-top: 20px;
}

<div class="gallery">
  <div class="photo">
    <a href="#"><img src="img/first-image.png">
      <div class="rollover">
        <p id="roll-text">Odťahovanie vozidiel z verejných komunikácií súkromnou spoločnosťou</p>
        <p id="roll-date">24. November 2014</p>
      </div>
    </a>
  </div>
  <div class="photo">
    <a href="#"><img src="img/second-image.png">
      <div class="rollover">
        <p id="roll-text">Odťahovanie vozidiel z verejných komunikácií súkromnou spoločnosťou</p>
        <p id="roll-date">24. November 2014</p>
      </div>
    </a>
  </div>
  <div class="photo">
    <a href="#"><img src="img/third-image.png">
      <div class="rollover">
        <p id="roll-text">Odťahovanie vozidiel z verejných komunikácií súkromnou spoločnosťou</p>
        <p id="roll-date">24. November 2014</p>
      </div>
    </a>
  </div>
  <div class="photo">
    <a href="#"><img src="img/fourth-image.png">
      <div class="rollover">
        <p id="roll-text">Odťahovanie vozidiel z verejných komunikácií súkromnou spoločnosťou</p>
        <p id="roll-date">24. November 2014</p>
      </div>
    </a>
  </div>
  <div class="photo">
    <a href="#"><img src="img/first-image.png">
      <div class="rollover">
        <p id="roll-text">Odťahovanie vozidiel z verejných komunikácií súkromnou spoločnosťou</p>
        <p id="roll-date">24. November 2014</p>
      </div>
    </a>
  </div>
</div>

Answer 1

问题是你有一个固定的图像宽度。现在，每个分辨率的宽度相同。

.photo img {
  width: 316.5px;
  height: 200px;
}

要解决此问题，请添加此

.photo a {
  width: 20%;

 }

.photo img {
  width: 100%;
  height: 200px;
}

Answer 2

设置以下内容：

1. float: left;至.photo
2. width: 20%;至.photo
3. width: 100%;至.photo a
4. width: 100%;至.photo img
5. height: auto;至.photo img
6. width: 100%至.gallery

为什么呢？ 图像需要连续流动，因此您需要为float设置一个值。此外，如果您想将5张图像放入一行，每个照片容器必须占据宽度的20％（每张照片依次占其容器的100％）。将高度设置为auto以确保图像不会被压扁并保持其纵横比。也可以通过给它100％的宽度使画廊从一侧到另一侧。

这应该可以解决问题。

Answer 3

在你的css中试试这个

.photo img {
  width: 100%;
  height: 200px;
 }