图像位置调整

Question

我简单地告诉你我想要什么，代码中的输入在大图像上，但我希望它们留在图像的左角，我尝试了很多东西但我做不到。如果我们考虑 2 列，输入将在左侧，最大的图像将保持在右侧。

我已附上图片。我为不明白的人准备了一张照片。

enter image description here

.gallery {
  display: grid;

  grid-gap: 20px;

  max-width: 100%;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-end: 8;
  width: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}
.overlay {
    position: absolute;
    top: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 1;
    color: white;
    font-size: 14px;
    padding: 8px;
    text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.overlay:hover {
  opacity: 1;
    background: rgb(255 255 255 / 91%);
    color: black;
}

<div class="gallery">
  <input type="radio" checked="checked" name="select" id="img-tab-1">
  <label data-title="Sample Infotext" for="img-tab-1" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg);"><div class="overlay">Orange</div></label>

  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg" border="0">

  <input type="radio" name="select" id="img-tab-2">
  <label for="img-tab-2" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Honey-1.jpg);"><div class="overlay">Honey</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Honey-1.jpg" border="0">

  <input type="radio" name="select" id="img-tab-3">
  <label for="img-tab-3" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Green-1.jpg);"><div class="overlay">Green</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Green-1.jpg"border="0">
  
  <input type="radio" name="select" id="img-tab-4">
  <label for="img-tab-4" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Grape-1.jpg);"><div class="overlay">Grape</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Grape-1.jpg"border="0">
  
    <input type="radio" name="select" id="img-tab-13">
  <label for="img-tab-13" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Camel-1.jpg);"><div class="overlay">Camel</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Camel-1.jpg"border="0">
  
  
  <input type="radio" name="select" id="img-tab-19">
  <label for="img-tab-19" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg);"><div class="overlay">Wine</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg"border="0">
  
  
  <input type="radio" name="select" id="img-tab-19">
  <label for="img-tab-19" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg);"><div class="overlay">Wine</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg"border="0">
  
        <input type="radio" name="select" id="img-tab-28">
  <label for="img-tab-28" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Sky-1.jpg);"><div class="overlay">Sky</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Sky-1.jpg"border="0">
</div>

Answer 1

因此，在对表格网格选项进行了一番摆弄之后，我发现以下似乎可行。 我自己不得不查找一些有关 display:grid 用法的信息，并在这里找到了一些不错的信息和示例：https://css-tricks.com/snippets/css/complete-guide-grid/

请注意，我应用了 grid-template-columns 属性来定义 6 个大小相等的列，它们或多或少地填充了整个宽度。然后，我为 .gallery img 的 grid-column-start 和 grid-column-end 属性应用了一些稍微不同的数字和跨度，定义图像应该占据右侧的 3 列并且还跨越 3 行。这使得标签都在最左边的列和行的单元格中占据了位置。给出以下结果。

我知道使用 javascript 可以实现相同的功能，这可能会产生更干净和可读性更好的代码，但如果没有尝试解决它，这是一个很好的难题。

.gallery {
  display: grid;
  grid-template-columns: 14% 14% 14% 14% 14% 14%;
  grid-gap: 20px;

  max-width: 100%;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 4;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 3;
  width: 100%;
  height: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}
.overlay {
    position: absolute;
    top: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 1;
    color: white;
    font-size: 14px;
    padding: 8px;
    text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.overlay:hover {
  opacity: 1;
    background: rgb(255 255 255 / 91%);
    color: black;
}

<div class="gallery">
  <input type="radio" checked="checked" name="select" id="img-tab-1" />
  <label data-title="Sample Infotext" for="img-tab-1" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg);"><div class="overlay">Orange</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg" border="0" />

  <input type="radio" name="select" id="img-tab-2" />
  <label for="img-tab-2" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Honey-1.jpg);"><div class="overlay">Honey</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Honey-1.jpg" border="0" />

  <input type="radio" name="select" id="img-tab-3" />
  <label for="img-tab-3" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Green-1.jpg);"><div class="overlay">Green</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Green-1.jpg"border="0" />
  
  <input type="radio" name="select" id="img-tab-4" />
  <label for="img-tab-4" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Grape-1.jpg);"><div class="overlay">Grape</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Grape-1.jpg"border="0" />
  
    <input type="radio" name="select" id="img-tab-13" />
  <label for="img-tab-13" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Camel-1.jpg);"><div class="overlay">Camel</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Camel-1.jpg"border="0" />
  
  
  <input type="radio" name="select" id="img-tab-19" />
  <label for="img-tab-19" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg);"><div class="overlay">Wine</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg"border="0" />
  
  
  <input type="radio" name="select" id="img-tab-19" />
  <label for="img-tab-19" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg);"><div class="overlay">Wine</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg"border="0" />
  
  <input type="radio" name="select" id="img-tab-28" />
  <label for="img-tab-28" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Sky-1.jpg);"><div class="overlay">Sky</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Sky-1.jpg"border="0" />
</div>

Answer 2

你太棒了，正是我想要的 :) 谢谢你，我喜欢这个平台..

.gallery {
  display: grid;
  grid-template-columns: 14% 14% 14% 14% 14% 14%;
  grid-gap: 20px;

  max-width: 100%;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 4;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 3;
  width: 100%;
  height: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}
.overlay {
    position: absolute;
    top: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 1;
    color: white;
    font-size: 14px;
    padding: 8px;
    text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.overlay:hover {
  opacity: 1;
    background: rgb(255 255 255 / 91%);
    color: black;
}

<div class="gallery">
  <input type="radio" checked="checked" name="select" id="img-tab-1" />
  <label data-title="Sample Infotext" for="img-tab-1" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg);"><div class="overlay">Orange</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg" border="0" />

  <input type="radio" name="select" id="img-tab-2" />
  <label for="img-tab-2" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Honey-1.jpg);"><div class="overlay">Honey</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Honey-1.jpg" border="0" />

  <input type="radio" name="select" id="img-tab-3" />
  <label for="img-tab-3" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Green-1.jpg);"><div class="overlay">Green</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Green-1.jpg"border="0" />
  
  <input type="radio" name="select" id="img-tab-4" />
  <label for="img-tab-4" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Grape-1.jpg);"><div class="overlay">Grape</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Grape-1.jpg"border="0" />
  
    <input type="radio" name="select" id="img-tab-13" />
  <label for="img-tab-13" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Camel-1.jpg);"><div class="overlay">Camel</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Camel-1.jpg"border="0" />
  
  
  <input type="radio" name="select" id="img-tab-19" />
  <label for="img-tab-19" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg);"><div class="overlay">Wine</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg"border="0" />
  
  
  <input type="radio" name="select" id="img-tab-19" />
  <label for="img-tab-19" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg);"><div class="overlay">Wine</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg"border="0" />
  
  <input type="radio" name="select" id="img-tab-28" />
  <label for="img-tab-28" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Sky-1.jpg);"><div class="overlay">Sky</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Sky-1.jpg"border="0" />
</div>