CSS 网格不适应屏幕宽度

Question

我是 HTML、CSS 新手，我一直在努力用图像制作这个负责任的网格。当您将鼠标悬停在它们上方时，会出现文本，但效果很好。问题是，一旦我调整屏幕大小，网格就会保持不变，并且不会缩小以适应。此外，一旦屏幕宽度小于 900 像素，图像就会变得混乱。

\n

预先感谢您的提示！

\n

全屏截图

\n

当屏幕较小时

\n

屏幕宽度低于 900px

\n

\r\n

\r\n

#grid {\n    width: 1200px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    grid-auto-rows: 0.2fr;\n    grid-gap: 10px; \n}\n\n.contain {\n    position: relative;\n    margin: 0;\n    width: 100%;\n    height: 100%;\n}\n\n#grid img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n}\n\n.description {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    padding: 1rem;\n    text-align: left;\n    background: rgba(29, 106, 154, 0.72);\n    color: #fff;\n    visibility: hidden;\n    opacity: 0;\n    transition: opacity 0.4s, visibility 0.4s;\n}\n\n.contain:hover .description {\n     visibility: visible;\n  opacity: 1;\n}\n    \n#grid > div:nth-child(1) {\n    grid-column: 1 / 2;\n    grid-row: 1 / 2;\n}\n\n#grid > div:nth-child(2) {\n    grid-column: 2 / 4;\n    grid-row: 1 / 2;\n}\n\n#grid > div:nth-child(3) {\n    grid-column: 4 / 5;\n    grid-row: 1 / 2; \n}\n\n#grid > div:nth-child(4) {\n    grid-column: 1 / 3;\n    grid-row: 2 / 3;\n}\n\n#grid > div:nth-child(5) {\n    grid-column: 1 / 3;\n    grid-row: 3 / 4;\n}\n\n#grid > div:nth-child(6) {\n    grid-column: 3 / 4;\n    grid-row: 2 / 4;\n}\n\n\n#grid > div:nth-child(7) {\n    grid-column: 4 / 5;\n    grid-row: 2 / 3;\n}\n\n#grid > div:nth-child(8) {\n    grid-column: 4 / 5;\n    grid-row: 3 / 4;\n}\n\n@media (max-width: 900px) {\n\n#grid {\n    grid-template-columns: repeat(2, 1fr);\n}\n\n#grid div:nth-child(1) {\n    grid-column: 1 / 2;\n    grid-row: 1 / 2;\n}\n#grid div:nth-child(2) {\n    grid-column: 2 / 4;\n    grid-row: 1 / 2;\n}\n#grid div:nth-child(3) {\n    grid-column: 3 / 4;\n    grid-row: 2 / 4;\n}\n#grid div:nth-child(4) {\n    grid-column: 1 / 3;\n    grid-row: 2 / 3;\n}\n#grid div:nth-child(5) {\n    grid-column: 1 / 3;\n    grid-row: 3 / 4;\n}\n#grid div:nth-child(6) {\n    grid-column: 1 / 2;\n    grid-row: 4 / 6;\n}\n#grid div:nth-child(7) {\n    grid-column: 2 / 4;\n    grid-row: 4 / 5;\n}\n#grid div:nth-child(8) {\n    grid-column: 2 / 4;\n    grid-row: 5 / 6;\n}\n}

\r\n

<div id="grid">\n  <div class="contain">\n\n    <img src="media/perspective.jpg">\n    <p class="description">Every element of an image influences how your audience feels about your subject. This includes using angles to establish different moods. Just by changing your camera position, you can affect how people perceive your photo.</p>\n  </div>\n  <div class="contain">\n    <img src="media/thirds.jpg">\n    <p class="description">The rule of thirds is based on the idea that pictures are generally more interesting and well balanced when they aren\xe2\x80\x99t centred. Imagine a grid placed over your images with two vertical lines and two horizontal lines that divide the picture into nine equal sections.</p>\n  </div>\n  <div class="contain">\n    <img src="media/eyes.jpg">\n    <p class="description">When shooting portraits, you\xe2\x80\x99ll be focusing on a very small area so it will be more important than ever that you get a nice sharp image. The eyes in particular are an important facial feature, and they\xe2\x80\x99re often the first thing people look at, especially when it comes to close-ups and headshots.</p>\n  </div>\n  <div class="contain">\n    <img src="media/background.jpg">\n    <p class="description">Generally speaking, the background should be as simple and clutter free as possible so that it doesn\xe2\x80\x99t pull the viewer\xe2\x80\x99s attention away from the main subject of the photo. Muted colours and plain patterns tend to work well, because you don\xe2\x80\x99t want viewers to end up being more interested in the colourful building or church tower in the background than your model.</p>\n  </div>\n  <div class="contain">\n    <img src="media/selective.jpg">\n    <p class="description">It\xe2\x80\x99s important to realise that every photographer, no matter how experienced or talented, gets some mediocre shots. The reason that their portfolios are so impressive, however, is that they only display their best work; they don\xe2\x80\x99t bore you with ten photos of a nearly identical scene.</p>\n  </div>\n  <div class="contain">\n    <img src="media/sunset.jpg">\n    <p class="description">Lighting can make or break a photo, and the early morning and evening are widely thought to be the best times of day for taking photos. In photography, the hour just after the sun rises or before it sets is called the \xe2\x80\x9cgolden hour,\xe2\x80\x9d because the sun is lower in the sky and the light is softer and warmer.</p>\n  </div>\n  <div class="contain">\n    <img src="media/raw.jpg">\n    <p class="description">RAW is a file format like jpeg, but unlike jpeg, it captures all the image data recorded by your camera\xe2\x80\x99s sensor rather than compressing it. When you shoot in RAW you\xe2\x80\x99ll not only get higher quality images but you\xe2\x80\x99ll also have far more control in post processing. For instance, you\xe2\x80\x99ll be able to correct problems such as over or underexposure and adjust things like colour temperature, white balance and contrast.</p>\n  </div>\n  <div class="contain">\n    <img src="media/flash.jpg">\n    <p class="description">If you\xe2\x80\x99re not careful, using your camera\xe2\x80\x99s built-in flash at night or in low light can lead to some unpleasant effects like red eyes and harsh shadows. In general, it\xe2\x80\x99s better to crank up the ISO and get noisier photos than to use the on-camera flash and risk ruining the shot altogether.</p>\n  </div>\n</div>

\r\n

\r\n

\r\n

\n

Answer 1

您可以尝试以下更改：

• 将宽度设置为 max-width，以便可以减小宽度。
• 使用自动调整和最小-最大使图像响应屏幕尺寸。

您可以删除媒体查询和第 n 个子项，它会正常工作。

#grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 0.2fr;
  grid-gap: 10px;
}