How to resize an image between (link image)?

Question

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%;
}

score 5 · Accepted Answer · edited May 23 '17 at 10:34

5

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>

edited May 23 '17 at 10:34

Community

1
1

answered Jun 02 '16 at 12:44

codefreaK

3,584
5
34
65

1

Thx ! Finally a proper SO answer :) – Coder1000 Jun 02 '16 at 12:50
@Coder1000 bakowroc and Error404 pointed out the same points in a slightly different way – codefreaK Jun 02 '16 at 12:51
1

I know :D But I found their answer to be lacking. I was waiting for something like what you wrote to accept an answer. If we don't uphold SO standards, everything will slowly start to degrade. – Coder1000 Jun 02 '16 at 12:54
@Coder1000 a little harsh :P Considering bakowroc is a new guy trying to contribute – codefreaK Jun 02 '16 at 12:56
1

I prefer to show newcomers what's good when I see it so they won't get banned from answering/ asking questions. I know how hard it can be to start on SO, so I prefer to help newcomers by explaining them what is the mindset here and what they should aim for. Many bans could have been avoided that way :) If we don't explain anything to newcomers, they will just get downvoted and banned one day and maybe give up on SO. That's not what we want as a community I hope :D – Coder1000 Jun 02 '16 at 13:01
@Coder1000 I appreciate your candor.Yes bans its a part of growing up on SO.I had gone through some myself but for me that proved to be useful as I Tried to gain some reputation during that time doing +ve things to get out of ban – codefreaK Jun 02 '16 at 13:06
@bakowroc Not trying to be harsh (sry if I was), just trying to help newcomers not get banned by rewarding the best answer (Sachin's in this case), not necessarily the FIRST answer. Have a nice day :D – Coder1000 Jun 02 '16 at 13:08
I understand what you mean, but if newcomers could gain rep AND not get banned, that would be the best option :-) Have a nice day :D – Coder1000 Jun 02 '16 at 13:10

Francisco Romero · Answer 2 · 2016-06-02T12:32:34.577

2

<a> tag is an inline element. Display it as inline-block so it can get height/width.

.link{
  display: inline-block;
  height: 400px;
  width: 400px;
}

.marquee-itm{
  width: 80%;
}

<div class="marquee">
   <ul>
      <li>
       <a class="link" href="https://developer.apple.com/swift/"><img class="marquee-itm" src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" /></a>
      </li>
   </ul>
</div>

edited Jun 02 '16 at 12:32

answered Jun 02 '16 at 12:18

Francisco Romero

12,787
22
92
167

This does not work. I am trying to style my img (only half of it appears because it is so big). Not my . – Coder1000 Jun 02 '16 at 12:24
@Coder1000 But add `display: inline-block` to the a tag. It will allows the a tag to have height/width. Also, set a height/width to the a tag because when you use percentages it takes the width/height of its container (if it has height/width). – Francisco Romero Jun 02 '16 at 12:25
@Error404 What do you think I just did ? This does permit to style the tag, not the img. – Coder1000 Jun 02 '16 at 12:26
1

@Coder1000 Add also a height/width desired for your a tag. If you are using percentages (as I put in my comment above) it will catch the percentages of the first parent that has height/width. – Francisco Romero Jun 02 '16 at 12:27
@Error404 Please look at mine. – Coder1000 Jun 02 '16 at 12:35
@Coder1000 Ok, so if you are using a carousel you can set your `max-width` to your `a` tag and then `width: 100%` to your image. – Francisco Romero Jun 02 '16 at 12:36
I am using height, not weight. Also, please look at my edit, it does not work :/ – Coder1000 Jun 02 '16 at 12:38
@Coder1000 Sorry, I did not notice but the way to get it was the same, just changing `width` for `height` :) – Francisco Romero Jun 02 '16 at 13:13
2

@Error404 That's why I gave you an upvote :P Good answer ! But Sachin Divakar's was excellent :D – Coder1000 Jun 02 '16 at 13:15
@Coder1000 Thank you! Sorry if I did not put it very clear. Have a nice day :) – Francisco Romero Jun 02 '16 at 13:17
@Error404 Thank you for helping me :D Have a nice day too ;) – Coder1000 Jun 02 '16 at 13:18

bakowroc · Answer 3 · 2016-06-02T13:06:47.323

0

You can't add perc. width/height value of nothing(not set). The img is inside the a tag, so you have to add to it a width/height value too.

edited Jun 02 '16 at 13:06

answered Jun 02 '16 at 12:34

bakowroc

21
4

How to resize an image between (link image)?

3 Answers3