Edit in JSFiddle

<form>
  <input type="radio" name="radio" id="radio1" value="らじお1">
<label for="radio1">
  <img src="http://placehold.it/80x40" alt="">
</label>
<input type="radio" name="radio" id="radio2" value="らじお2">
<label for="radio2">
  <img src="http://placehold.it/80x40" alt="">
</label>
<input type="radio" name="radio" id="radio3" value="らじお3">
<label for="radio3">
  <img src="http://placehold.it/80x40" alt="">
</label>

<hr>

<input type="checkbox" name="checkbox" id="checkbox1" value="ちぇっくぼっくす1">
<label for="checkbox1">
  <img src="http://placehold.it/80x40" alt="">
</label>
<input type="checkbox" name="checkbox" id="checkbox2" value="ちぇっくぼっくす2">
<label for="checkbox2">
  <img src="http://placehold.it/80x40" alt="">
</label>
<input type="checkbox" name="checkbox" id="checkbox3" value="ちぇっくぼっくす3">
<label for="checkbox3">
  <img src="http://placehold.it/80x40" alt="">
</label>
</form>
img {vertical-align: middle}