使用图像作为复选框输入

Question

首先，请不要将此标记为重复，因为我想要对此QnA，here进行一些修改。我正在使用这个answer来实现我想要的，但它几乎满足我的需要。这是他的demo。

我正在努力实现他的目标，this是我迄今为止所做的。但是，当我单击图像时，由于边框，它会使图像变得更大。我想要的是，当选中图像（复选框）时，左上角有一个复选框图标（已完成），图像周围有边框而不会使图像变大。以下是我的代码段中的代码：

这是HTML：

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="http://lorempixel.com/103/103" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="http://lorempixel.com/102/102" /></label>
  </li>
</ul>

这是CSS：

ul {
  list-style-type: none;
}    
li {
  display: inline-block;
}    
input[type="checkbox"][id^="cb"] {
  display: none;
}    
label {
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
}    
label:before {
  background-color: red;
  color: white;
  display: block;
  border: 1px solid red;
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
}    
label img {
  height: 100%;
  width: 100%;
}    
:checked + label {
  border-color: red;
}    
:checked + label:before {
  content: "✓";
  background-color: red;
  border: 1px solid red;
  z-index: 99;
}    
:checked + label img {
  z-index: -1;
  border: 1px solid red;
}

谢谢！

Answer 1

为img添加带透明边框

label img {
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}

https://codepen.io/anon/pen/PVRxRM

Answer 2

我给了li固定的高度和宽度，当选中复选框时，我正在改变图像的高度和宽度，并将其对齐在中心。希望这就是你要找的东西。谢谢。

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
    display: block;
    position: relative;
    cursor: pointer;
    height: 120px;
    border: 1px solid;
    width: 120px;
}

label:before {
  background-color: red;
  color: white;
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  transition-duration: 0.4s;
}

label img {
  height: 100%;
  width: 100%;
}

:checked + label {
  border-color: red;
}

:checked + label:before {
  content: "✓";
  background-color: red;
  border: 1px solid red;
  z-index: 99;
}

:checked + label img {
  z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100px;
    width: 100px;
}

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="http://lorempixel.com/100/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="http://lorempixel.com/101/101" /></label>
  </li>
  <li><input type="checkbox" id="cb3" />
    <label for="cb3"><img src="http://lorempixel.com/102/102" /></label>
  </li>
  <li><input type="checkbox" id="cb4" />
    <label for="cb4"><img src="http://lorempixel.com/103/103" /></label>
  </li>
</ul>

Answer 3

尝试这个：

ul {
  list-style-type: none;
}
li {
  display: inline-block;
}
input[type="checkbox"][id^="cb"] {
  display: none;
}
label {
    border: 1px solid #fff;
  display: block;
  position: relative;
  cursor: pointer;
}
label:before {
  background-color: red;
  color: white;
  content: "";
  display: block;
  border: 1px solid red;
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  transition-duration: 0.4s;
  transform: scale(0);
}
label img {
  height: 100%;
  width: 100%;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}
:checked + label {
  border-color: red;
}
:checked + label:before {
  content: "✓";
  background-color: red;
  z-index: 99;
  transform: scale(1);
}
:checked + label img {
  z-index: -1;
  transform: scale(0.9);
}

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="http://lorempixel.com/103/103" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="http://lorempixel.com/102/102" /></label>
  </li>
</ul>

Answer 4

因此，如果要求是您单击图像时，需要在图像的左上角显示✓，并且您还想在图像周围显示一些边框，那么您所做的是绝对正确的。

如果你担心通过n像素移动图像，那么请记住，border占据一些空间，不像outline，不需要任何空间。 Outline在对象周围采用n像素并应用边框类型效果。

所以有2个解决方案 -

1. @lalji上面提到了什么。当你加载页面时，在颜色为transparent的图像上应用边框，这样它将保留边框的空间，实际上你不会看到它周围的任何边框，并且点击（选择图像）只需更改边框的颜色。

Fiddle for border transparent

label img {
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}

2. 另一个是当你点击它时，应用轮廓而不是边框​​。

Fiddle for outline

:checked + label img {
  z-index: -1;
  outline: 1px solid red;
}

3. UPADTE如果我们想要在选择图像时显示一些图像/文本。如果你在这里看到我添加了另一个节点，说明details将仅在选择图像时显示，并将在图像的中心对齐。

Fiddle

这下面的css规则最初隐藏细节并使它们处于中心等。

label img + .details
{
  color:white;
  position:absolute;
  top:0px; 
  width:100%;  
  display:none;
  margin-top:50%;
  transform: translatey(-50%);
  text-align:center;
}

现在，如果选择了图像，我们将显示details部分。

:checked + label img + .details
{
  display:block;
}