0

For my site, if there is a larger image that can be shown (like zoom in) the product has a magnifying glass below it that adds 30px to the height of the container. So now, if you have a page where some images don't have larger images the thumbnails will all look un-even.

HTML Markup -

<div class="parent">
    <a class="itemImage">
        <img src="someImage.jpg"/>
    </a>
    <a class="magnify"> <!-- This element is only generated if a larger image is available -->
        <img class="itemEnlarge" src="magnifyingGlass.jpg"/>
    </a>
</div>

So here are the max-dimensions of `someImage.jpg -

  • With Magnifying Glass: 200px x 100px (WxH)
  • Without Magnifying Glass: 200px x 130px (WxH)

Is it possible to set the height of someImage based on whether or not the magnify element is generated?

I tried this, but I honestly don't even know what this will apply a css property to.

.parent .itemImage + a .itemEnlarge{max-height: 100px;}
Adjit
  • 10,134
  • 12
  • 53
  • 98
  • 1
    No, you can't select the previous sibling (or its descendants) with CSS. Only siblings that come after the reference element in the DOM can be selected. – Harry Jun 17 '16 at 16:58
  • 1
    http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector – j08691 Jun 17 '16 at 16:59
  • You mention that the `.magnify` element is only generated if a larger image is available. Is this done on the server? – hungerstar Jun 17 '16 at 17:00
  • @hungerstar yes it is – Adjit Jun 17 '16 at 17:00
  • @Harry so I would only be able to set the height of the anchor elements, but not necessarily the image elements? – Adjit Jun 17 '16 at 17:01
  • @Adjit: No, not even that. You can set properties on `.magnify` or `.itemEnlarge` based on `.itemImage` but not the other way around. – Harry Jun 17 '16 at 17:02
  • @Adjit You're referencing `someImage.jpg` and say that it has the same width regardless of magnifying glass presence but has a different height. What I'm not understanding is if you're trying to stretch the image (because that's what will happen by increasing it's height but not width) or if you're attempting something else that isn't obvious to me. – hungerstar Jun 17 '16 at 17:08
  • `.parent > .itemImage ~ .magnify {}` – Adam Buchanan Smith Jun 17 '16 at 17:17
  • @Harry Is that because it is working top down? if I switch up the order will that be possible? – Adjit Jun 17 '16 at 17:21
  • @Adjit: Yes, it is because the traversal is top-down. If you move the `.magnify` to be above `.itemImage` then you can select the `img` based on `.magnify` (like `.magnify + .itemImage > img`). – Harry Jun 17 '16 at 17:26

1 Answers1

0

Try setting a position of relative to the class="parent" and then setting a position of absolute to a.magnify. Positioning absolute takes up no space and you should be able to position where needed with left, right, top and bottom. This will make the height with or without the magnifying glass the same. If that doesn't work send a fiddle for me to look at.

Rob
  • 108
  • 1
  • 8