Алмаз Бисенбаев

Смотря в чем именно проблема. Тайтл совсем нельзя оборачивать ни в какой тег или нельзя именно в DIV? Если второй вариант, то без проблем юзаешь SPAN или что угодно и даешь display: block;

Если совсем нельзя юзать теги, то стилизуешь сам <a>, а отступы имитируешь, задав margin-bottom для картинки

align-items делаешь stretch, а саму картинку высотой 100%, растяжение картинки исправляешь добавлением object-fit:cover;

Узнай класс изображения в лайтбоксе и задай ему:

width: auto!important;
height: auto!important;

Че зря пердолиться-то

Че париться, просто добавь в самом начале

* {
   margin: 0;
   padding: 0;
}

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

При позиционировании бэкграунда сначала указывается положение по горизонтали, а потом уже по вертикали. Т.е. у тебя должно быть не "0% 100%", а "100% 0%".

А просто продублировать ссылку сложно?

<div class="text1"><a href="http://yandex.ru/">Ссылка</a></div>
<a href="http://yandex.ru/" class="text2">Сюда нужно кликнуть</a>