Я создаю сайт для друга, и часть его спецификации заключается в том, что изображения должны включать ссылки для просмотра изображения в более высоком разрешении. Я приложил домашний образ в анкертаге внутри div, но я не могу понять, почему пространство моего поля изображения доступно для просмотра.
Я предполагаю, что это связано с тем, что изображение находится внутри div?
Вот мой jfiddle: http://jsfiddle.net/9kSL3/5/
Вот интересующие вас области:
<div id="home">
<a href="./images/home3.jpg"><img src='http://s17.postimg.org/4glpnzdan/home3.jpg' border='0' alt="home3" /></a>
</div>
#home img{
width: 60%;
display: block;
margin-left: auto;
margin-right: auto;
/*border-radius: 15px;
border: 1px;*/
}
Что странно для меня в этом ответе: Удалить пространство вокруг кликабельного изображения, ответ заключается в использовании поля вместо заполнения
Это потому, что у вас есть img с помощью display: block внутри тега a, который является встроенным.
Переместите теги width: 60% и margin: 0 auto; в тег a с помощью display: block и добавьте width: 100% в img
Пример: http://jsfiddle.net/9kSL3/6/
Это потому, что вы установили изображение в качестве элемента блока (я полагаю, вы сделали это для центрирования). Если вы удалите строку display: block и добавьте раздел для div #home:
#home {
text-align: center;
}
Он должен работать для вас, и поля не будут "clickable"
Я решил эту проблему, установив parent div элемента <a> на text-align: center и <img> на display: inline.
.parent-div-of-your-a-tag {
text-align: center;
}
.your-img-class-name {
width: 100%; // might not be necessary, I needed them for responsive design
height: auto; // see above
display: inline; // necessary
}