影响图像显示方式的 href答案

【问题标题】：a href affecting how images are displaying影响图像显示方式的 href
【发布时间】：2016-10-07 17:09:37
【问题描述】：

四张较小的图片应位于 2 x 2 的网格中，较大的图片应填充与其中两张较小的图片相同的宽度。

无需添加 href 链接即可全部使用。一旦我添加了链接，它们就会被放入页面左侧的链接中。

这是我的 HTML 和 CSS 的链接。 enter code herehttps://jsfiddle.net/67soh1s3/

【问题讨论】：

【解决方案1】：

你可以把你的代码改成这个

* {
  box-sizing: border-box
}
#post-template-container {
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow: auto;
  background-color: #404040;
}
#show-write-up-section {
  position: relative;
  width: 98%;
  height: 100%;
  padding: 1%;
  margin: 1%;
  background-color: #404040;
}
#title-of-show {
  text-align: center;
  color: #FFDD00;
}
#show-information {
  text-align: center;
  color: #FFFFFF;
}
#production-photo-gallery {
  width: 100%;
  background-color: #404040;
  text-align: center
}
#production-photo-gallery ul {
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}
#production-photo-gallery ul li {
  width: 48%;
  padding: 5%;
  display: inline-block;
  list-style: none
}
#production-photo-gallery ul#main-production-image li {
  width: 100%;
}
#production-photo-gallery ul li img {
  width: 100%;
}
#main-production-image {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

<div id="post-template-container">
  <div id="show-write-up-section">
    <h1 id="title-of-show">Sample Title</h1>
    <p id="show-information">Sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample
      text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text
      Sample text sample text Sample text sample text Sample text Sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample
      text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text
      sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text</p>
    <div id="production-photo-gallery">
      <ul>
        <li>
          <a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
            <img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
          </a>
        </li>
        <li>
          <a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
            <img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
          </a>
        </li>
        <li>
          <a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
            <img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
          </a>
        </li>
        <li>
          <a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
            <img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
          </a>
        </li>
      </ul>
      <ul id="main-production-image">
        <li>
          <a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
            <img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

这是因为display:flex 将<a></a> 视为子容器。

请改用display:block或display:inline-block。

【讨论】：

【解决方案3】：

对图像大小使用百分比并不是保护自己免受浏览器故障和问题影响的最佳方法。一旦你设置了精确的像素大小，它就会再次起作用。

【讨论】：