html - Scalable, Centered Image Link -

html - Scalable, Centered Image Link -

i'm using html & css seek create centered image, when click it, gives total size version. image scalable on smaller devices scales down. right not worrying bandwidth of client. i'm having issue clickable area outside of image makes theres sort of invisible link.

here mean.

all areas have arrows user can click - doesn't create sense. want image clickable. can work, have utilize inline block on tag, ruins scaling depending on width of screen.

here html part.

<a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="/images/guides/wavelist_editing/wave3.jpg"></a>

and css.

.content a:link.image_link { /*not overqualified - overrides stuff on main.css. gets rid of underline*/ border-bottom: 0px none transparent; text-decoration: none; display:block; } .content .popout_image { display: block; margin-left: auto; margin-right: auto; box-shadow: 8px 8px 10px #555; margin-bottom: 10px; max-width: 100%; min-width: 100px; } .content .scalable_image { min-width: 100px; max-width: 100%; height: auto; width: auto\9; /* ie8 */ }

to verify info here computed values link , image respectively in firefox (the first image incorrectly shows inline-block, took image in testing, it's block - both values introduce error, no-scaling or big clicking):

i sense missing obvious here. can't google because "image link" seems pretty generic.

you accomplish this:

jsfiddle - demo

html:

<div class="content"> <a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="http://placehold.it/350x150"></a> <div>

css:

.content { text-align: center; /* add together */ } .content a:link.image_link { border-bottom: 0px none transparent; text-decoration: none; display: inline-block; /* add together */ } .content .popout_image { display: block; box-shadow: 8px 8px 10px #555; margin-bottom: 10px; max-width: 100%; min-width: 100px; } .content .scalable_image { min-width: 100px; max-width: 100%; height: auto; width: auto\9; }

html css image