Coder1000 Coder1000 - 6 months ago 12
CSS Question

How to resize an image between <a></a> (link image)?

CODE:

<div class="marquee">
<ul>
<li>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>





SITUTATION:

When I remove the
<a>
tags, this works:

.marquee ul li img {
max-height: 80%;
}





PROBLEM:

When I add the
<a>
, I can't find a way to style my images.

1) Doesn't work.

.marquee ul li a img {
max-height: 80%;
}


2) Doesn't work.

.marquee ul li a {
max-height: 80%;
}


3) Doesn't work.

.marquee-items {
max-height: 80%;
}


QUESTION:




How can I make it work with
<a>
tags to keep my image links ?




EDIT:

Just want to make sure there is no misunderstanding. I am using a carousel which has a width already defined. The carousel has many images in it. I just need to define the max-height for the images so they don't overflow. I just can't seem to select them after I made them clickable images by adding
<a></a>
tags.

Also:

4) Does not work.

.marquee ul li a{
display: inline-block;
max-height: 80%;
}

.marquee ul li a img {
max-height: 100%;
}


5) Does not work.

.marquee ul li a{
display: inline-block;
max-height: 80%;
}

.marquee ul li a img {
height: 100%;
}





SOLUTION:

.marquee ul li a{
display: inline-block;
height: 80%;
}

.marquee ul li a img {
max-height: 100%;
}

Answer

Simple illustration for being able to set height for it you need the surrounding anchor tag to have height specified for height to work on anchor tag you need the display property set to block

Why anchor tag does not take height and width of its containing element
Check out this stackoverflow question

a {
    display:inline-block;
    height:1000px;
    
}
a img {

        max-height:700px;
        height:100%;
        width:100%;
}
<a href="#">
    <img src="http://static.adzerk.net/Advertisers/8d3759a4bd66406998dc013b5b948ae6.png">
   </a>

Notice the difference here with and without display :block

a {
  height: 1000px;
}
a img {
  max-height: 700px;
  height: 100%;
  width: 100%;
}
<a href="#">
  <img src="http://static.adzerk.net/Advertisers/8d3759a4bd66406998dc013b5b948ae6.png">
</a>

Comments