Making hyperlink responsive

Question

<div class="row">
    <div class="col-md-3">
       <a class="mylink img-responsive" href="#"></a>
    </div>
    <div class="col-md-3">
       <img src="/image1.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
       <img src="/image2.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
       <img src="/image3.jpg" class="img-responsive">
    </div>
</div>

which results in the following layout:

how can i make the link responsive, having the same height as the images?

mylink is defined as following:

a.mylink
{
    display:block;
}

any ideas? thanks

doesn't work as expected .. height:auto won't work, fixed height either .. — Fuxi, May 11 '16 at 13:02

score 1 · Answer 1 · answered May 11 '16 at 13:17

Try below solution using display: flex.

CSS :

.row {
  display: flex;
}
.col-md-3 {
  flex: 1;
  background-color: green;
}
a.mylink {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  background-color: red;
}

HTML:

<div class="row">
  <div class="col-md-3">
    <a class="mylink img-responsive" href="#"></a>
  </div>
  <div class="col-md-3">
    <img src="/image1.jpg" class="img-responsive">
  </div>
  <div class="col-md-3">
    <img src="/image2.jpg" class="img-responsive">
  </div>
  <div class="col-md-3">
    <img src="/image3.jpg" class="img-responsive">
  </div>
</div>

score 1 · Answer 2 · answered May 11 '16 at 13:18

This may be a cheap workaround, but it works :

Bootply

First, add your image into the first column, inside the link :

<div class="row">
    <div class="col-md-3">
       <a class="mylink img-responsive" href="#">
         <img src="https://digwp.com/wp-content/blog-images/blank-thumb.png" class="img-responsive invis"></a>
    </div>
    <div class="col-md-3">
       <img src="https://digwp.com/wp-content/blog-images/blank-thumb.png" class="img-responsive">
    </div>
    <div class="col-md-3">
       <img src="https://digwp.com/wp-content/blog-images/blank-thumb.png" class="img-responsive">
    </div>
    <div class="col-md-3">
       <img src="https://digwp.com/wp-content/blog-images/blank-thumb.png" class="img-responsive">
    </div>
</div>

Next, apply these styles :

a.mylink
{
    display:block;
}

div {
 border: 1px solid black; 
}
.invis {
   opacity: 0;
  }

This means that the 4 columns are actually exactly the same, but setting the opacity of the 1st one to 0 hides the image!

If you need text for your link, you can just add this inside the first div and positional it absolutely.

Hope this is helpful.

score 0 · Answer 3 · answered May 11 '16 at 13:03

0

if you dont know height of the highest element or value may be different - in pure css you can't

but you can:

set min-height on class img-responsive

or

in JS (jQuery for example):

find element (.find())
check height of every element and find the highest result (.height())
set the same hight

answered May 11 '16 at 13:03

Oskar Kosowski

576
5
11

I guess you'd say that. i have idea, if your element is only in one line i can set height: 100% of every child element, then every child will be of hight of parent. Maybe this helps – Oskar Kosowski May 11 '16 at 13:24

Making hyperlink responsive

3 Answers3