кликабельный div с img в нем?

Question

У меня есть div, который я бы хотел сделать кликабельным. Я знаю, что нужно, чтобы div (и?) Ссылка имела фиксированную ширину и высоту + display: block. У меня есть изображение внутри div. Кажется, что div «clickable» на самом деле представляет собой большую прозрачную ссылку, и этот щелчок плохо работает с изображениями, поскольку он не разделяет пространство. Мне нужно щелкнуть правой кнопкой мыши по изображению и нажать «Сохранить как».

Так как мне сделать div кликабельным? Я попытался установить ширину и высоту img, но это растянуло img.

Answer 1

Вы можете установить тег <a>, чтобы заполнить весь родительский элемент. Пример:

<div>
    <a href="..." style="display: block; height: 100%">
        <img src="..." alt=".." />
    </a>
</div>

и весь <div> будет кликабельным.

Answer 2

Чтобы на самом деле превратить div в ссылку, вы должны использовать Javascript, но, читая больше по вашему вопросу, я не совсем уверен, что это то, что вы спрашиваете. Но если вам когда-нибудь понадобится сделать div в ссылку, вот она.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

Было бы здорово, если бы вы могли предоставить свою разметку, чтобы мы могли видеть то, что вы видите.

Спасибо

Answer 3

Этот ответ неправильный! Он не передает HTML. Я держу это здесь только для того, чтобы другие люди могли видеть это и знать, что это не ответ на вопрос. (в случае, если кто-то еще имел такую ​​же идею к этому ответу)

Почему бы просто не сделать что-то вроде

<a href="...">
  <div>
    <img src="..." alt="..">
  </div>
</a>