Использование изображения для ввода флажка

Question

Во-первых, пожалуйста, не отмечайте это как дубликат, потому что я хочу попросить небольшую модификацию этого QnA, здесь .Я использую этот ответ , чтобы достичь того, чего я хочу, но он почти соответствует тому, что мне нужно.Вот его демо .

Я пытаюсь добиться того, что он сделал, этот - это то, что я сделал до сих пор.Но когда я нажимаю на изображение из-за границы, оно немного увеличивается.Я хочу, чтобы, когда изображение (флажок) отмечено, в левом верхнем углу есть значок флажка (все готово), и изображение окружено рамкой, не увеличивая изображение.Вот код в моем фрагменте:

вот 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

Попробуйте:

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 2

Таким образом, если требование заключается в том, что когда вы нажимаете на изображение, вам нужно показать ✓ в левом верхнем углу изображения, и вы также хотите показать некоторую рамку вокруг изображения, тогда то, что вы сделали, абсолютно верно.

Если вас беспокоит перемещение изображения на n пиксель, имейте в виду, что border занимает некоторое место в отличие от outline, которое не требует места.Outline берет n пикселей вокруг объекта и применяет эффект типа границы.

Таким образом, есть 2 решения -

1. , что @lalji предложило выше.когда вы загружаете страницу, примените границу к изображению с цветом, как transparent, чтобы зарезервировать место для вашей рамки, и фактически вы не увидите никакой границы вокруг нее, а при нажатии (выборе изображения) просто измените цвет рамки.

Скрипка для границы прозрачная

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

другое будет, когда вы щелкнете по нему, примените контур вместо границы.

Скрипка для контура

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

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;
}

Answer 3

Я присвоил 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 4

Добавить границу для img с прозрачным

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

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