如何定位 元素？

Question

我已经读过要定位到<picture>元素的位置，我应该只定位它的<img>部分，因为所有的<picture>元素仍然会渲染<img>。

但是使用此代码似乎不起作用。我可以做错什么吗？

[执行此操作时，第二个<picture> / <img>不显示任何内容。

body {
  background: grey;
}
.container {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  padding: 1rem;
}

.top-grid-container {
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
            "top-Adrian-Mole top-Misty top-Misty"
            "top-Tasty top-Misty top-Misty";
    grid-gap: 10px;
}

.top-Adrian-Mole {
    grid-area: top-Adrian-Mole;
}

.top-Tasty {
    grid-area: top-Tasty;
}

.top-Misty {
    grid-area: top-Misty;
}

img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
}

.top-grid-container > div > img:nth-of-type(2) {
  display: none;
}

<div class="container"> 
  <h2>Picture Element</h2>
			<div class="top-grid-container">
				<div class="top-Adrian-Mole">
					<picture>
						<source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
						<img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
					</picture>
					<picture>
						<source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
						<img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
					</picture>          
				</div>
				<div class="top-Tasty">
					<picture>
						<source srcset="https://loremflickr.com/320/240/paris, 1x, https://loremflickr.com/640/480/paris 2x, https://loremflickr.com/1280/960/cat 3x">
						<img src="img/mobile/[email protected]" alt="A Taste of Honey">
					</picture>
					<picture>
						<source srcset="https://loremflickr.com/320/240/monkey 1x, https://loremflickr.com/640/480/monkey 2x, https://loremflickr.com/1280/480/monkey 3x">
						<img src="https://loremflickr.com/320/240/monkey" alt="Adrian Mole">
					</picture>          
				</div>
				<div class="top-Misty">
				  <picture>
						<source srcset="https://loremflickr.com/320/240/cat 1x, https://loremflickr.com/640/480/cat 2x, https://loremflickr.com/1280/480/cat 3x">
						<img src="https://loremflickr.com/320/240/cat" alt="Hello Dolly">
					</picture>
<picture>
						<source srcset="https://loremflickr.com/320/240/code 1x, https://loremflickr.com/640/480/code 2x, https://loremflickr.com/1280/480/code 3x">
						<img src="https://loremflickr.com/320/240/code" alt="Adrian Mole">
					</picture>            
				</div>
</div>
</div>

Answer 1

您可以实际上使用<picture>定位元素。我的最初信息不正确。