Изображение href больше, чем само изображение. Не уверен, как это исправить? - PullRequest
Новая
       25

Изображение href больше, чем само изображение. Не уверен, как это исправить?

1 голос
/ 14 октября 2019

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

Вот мой HTML-код для изображений: 

<div class="icons">
  <a href="assets/Flood.mp4" onclick="lightbox_open();"><img src="assets/Floodbw.png" alt="flood" style="float: right; width: 20%; margin-right: -0.5%; margin-left: -0.25%; margin-bottom: -0.5%;">
  <a href="assets/project_2_documentation_edit_2.mp4" onclick="lightbox_open();"><img src="assets/Dependencybw.png" alt="Dependency" style="float: right; width: 20%; margin-right: -0.5%; margin-left: -0.25%; margin-bottom: -0.5%;">
  <a href="assets/project1.mp4" onclick="lightbox_open();"><img src="assets/Disposalbw.png" alt="Disposal" style="float: right; width: 20%; margin-right: -0.5%; margin-left: -0.25%; margin-bottom: -0.5%;"></a>
  <p style="clear: both;">
</div>
<div class="icons2">
  <a href="assets/Seamstress.mp4" onclick="lightbox_open();"><img src="assets/Buttonsbw.png" alt="buttons" style="float: right; width: 30.1%; margin-right: -0.72%; margin-left: -0.5%; margin-top: -1.8%; margin-bottom: -0.8%;">
  <a href="assets/Narrative.mp4" onclick="lightbox_open();"><img src="assets/Bitterbw.png" alt="Bitter;">
</div>

А вот мой код CSS: 

.icons{
  margin-top: -0.5%;
}

.icons2 img{
  float: right; width: 30.1%; margin-right: -0.72%; margin-left: -0.5%; margin-top: -1.8%; margin-bottom: -0.8%;
}

А вот ссылка на мое портфолио (ещеработа над другими страницами): https://elizabethnnguyen.github.io/digitalworks.html

Я имею в виду изображения красного и синего цветов, изображающие цветочную девочку и кнопки в разделе видео-работ.

...