Place an <a> hyperlink on top of an <img> element with adaptive responsiveness

Question

Place an <a> hyperlink on top of an <img> element with adaptive responsiveness

I'm working on a React application and I want to overlay multiple links using <a> tags on top of an image <img>. Initially, this seemed easy but I ran into an issue - when the window is resized (on different devices, for example), the positioning of the links and the image scale differently.

To demonstrate this problem, I've created a JSFiddle. If you resize the window in the bottom right corner, you'll notice that the link doesn't stay "glued" to the image. How can I solve this?

Here's the functional component code from the fiddle:

<div class="parentDiv">

    <div className={styles.imgWrapper}>
        <img 
            className={styles.imgResponsive} 
            src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492__480.jpg" 
        />
        <div class="divLink">
            <a href="some_url">Some link</a>
        </div>
    </div>
</div>

And here is the CSS being used:

.parentDiv {
    height: 70vh;
    width: 100vw;
}

.imgResponsive {
    position:relative;
    height: 100%;
    width:auto;
    top: 0;
    left: 0;
}

.divLink {
    position: absolute;
    top: 20%;
    left: 20%;
}

Any suggestions on how I can make the link stay attached to the image even after window resizing would be greatly appreciated! Thank you!

html css reactjs

Answer 1

Answer №1

To ensure an image is displayed properly on a webpage, it is important to set its size in the CSS rule either using pixels or percentage values. Without specifying a size, the image will appear in its original size and may not be responsive.

Simply setting the width property should be enough, but for added certainty, you can include height: auto as well. Alternatively, defining the height property and including width: auto can achieve the same result.

When dealing with text links, centering them using

left: 50%; top: 50%; transform: translate(-50%, -50%);

is recommended for better responsiveness. It may also be beneficial to specify a smaller font-size within a media query.

A couple of additions to consider after reviewing the provided fiddle:

1.) There is a div layer called .imgWrapper between the parent element and the image itself. To ensure this wrapper matches the size of the parent element, add the following CSS:

.imgWrapper {
  height: 100%;
  width: 100%;
}

This allows the image's height: 100% setting to be relative to the 70vh height of .parentDiv.

2.) Since there is no ReactJS in the fiddle provided, make sure to specify classes in the HTML code as regular attributes, like so:

<img class="imgResponsive" src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492__480.jpg" />

See the result here: https://jsfiddle.net/9fqohL2m/1/

Answer 2

To ensure an image is displayed properly on a webpage, it is important to set its size in the CSS rule either using pixels or percentage values. Without specifying a size, the image will appear in its original size and may not be responsive.

Simply setting the width property should be enough, but for added certainty, you can include height: auto as well. Alternatively, defining the height property and including width: auto can achieve the same result.

When dealing with text links, centering them using

left: 50%; top: 50%; transform: translate(-50%, -50%);

is recommended for better responsiveness. It may also be beneficial to specify a smaller font-size within a media query.

A couple of additions to consider after reviewing the provided fiddle:

1.) There is a div layer called .imgWrapper between the parent element and the image itself. To ensure this wrapper matches the size of the parent element, add the following CSS:

.imgWrapper {
  height: 100%;
  width: 100%;
}

This allows the image's height: 100% setting to be relative to the 70vh height of .parentDiv.

2.) Since there is no ReactJS in the fiddle provided, make sure to specify classes in the HTML code as regular attributes, like so:

<img class="imgResponsive" src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492__480.jpg" />

See the result here: https://jsfiddle.net/9fqohL2m/1/

Answer 3

Answer №2

Minor adjustment needed due to the default browser style causing margin issues:

* {
    margin:0;
    padding:0;
    margin-block-start:0;
    margin-block-end:0;
}
.containerDiv {
    height: 80vh;
    width: 120vw;
}

.responsiveImg {
    position:relative;
    width:100%;
    top: 0;
    left: 0;
}

.linkDiv {
    position: absolute;
    top: 10vw;
    left: 10vw;
}

The * {} rule applies the styling universally with lower priority.
If you are still experiencing issues, refer to the code snippet I used for adding markers to a map here
Hopefully, this adjustment resolves the issue.

Answer 4

Minor adjustment needed due to the default browser style causing margin issues:

* {
    margin:0;
    padding:0;
    margin-block-start:0;
    margin-block-end:0;
}
.containerDiv {
    height: 80vh;
    width: 120vw;
}

.responsiveImg {
    position:relative;
    width:100%;
    top: 0;
    left: 0;
}

.linkDiv {
    position: absolute;
    top: 10vw;
    left: 10vw;
}

The * {} rule applies the styling universally with lower priority.
If you are still experiencing issues, refer to the code snippet I used for adding markers to a map here
Hopefully, this adjustment resolves the issue.

Answer 5

Answer №3

To ensure the image resizes properly with the page, you can either adjust it using percentages or pixels:

.parentDiv {
    height: 70vh;
    width: 100vw;
}

.imgResponsive {
    position:relative;
    width:100%;
    top: 0;
    left: 0;
}

.divLink {
    position: absolute;
    top: 20%;
    left: 20%;
}

If you prefer a fixed-width image (although this may cause issues on different devices), you can set it up like this:

.parentDiv {
    height: 70vh;
    width: 100vw;
}

.imgResponsive {
    position:relative;
    top: 0;
    left: 0;
}

.divLink {
    position: absolute;
    top: 96px;
    left: 96px; /*adjust as needed*/
}

I hope these solutions prove helpful for your needs.

Answer 6

To ensure the image resizes properly with the page, you can either adjust it using percentages or pixels:

.parentDiv {
    height: 70vh;
    width: 100vw;
}

.imgResponsive {
    position:relative;
    width:100%;
    top: 0;
    left: 0;
}

.divLink {
    position: absolute;
    top: 20%;
    left: 20%;
}

If you prefer a fixed-width image (although this may cause issues on different devices), you can set it up like this:

.parentDiv {
    height: 70vh;
    width: 100vw;
}

.imgResponsive {
    position:relative;
    top: 0;
    left: 0;
}

.divLink {
    position: absolute;
    top: 96px;
    left: 96px; /*adjust as needed*/
}

I hope these solutions prove helpful for your needs.

Place an <a> hyperlink on top of an <img> element with adaptive responsiveness

Answer №1

Answer №2

Answer №3

Similar questions

Assign a specific style to Fancybox links and buttons for managing the functions of 'next', 'previous', and 'close'

Creating an HTML table that adjusts to the screen height with square-shaped cells

Issues arising from the arrangement of the menu bar

Interactive Sidebar Navigation Content

Tips for adjusting the scrollbar in Tailwind (next.js/react)

When you apply margins in CSS and HTML, it can cause elements to break out of the row alignment

How can you customize the appearance of the filledInput component within a TextField component in Material UI?

What causes an absolutely positioned element to be positioned by its sibling rather than at the top corner of the page?

Is it possible to capture the child element's id?

Assign the Click event of the Button to the Recat Link, triggering a function when the button is clicked, followed by navigation to another component

Issues with inline display not being rendered properly in HTML/CSS

The PHP script is exhausting memory resources and triggering a fatal error

Add stylish stripes to your tables with ng-repeat

Image hover effect displayed when hovering over an image

Tips for resolving issues with the header and scrolling content

Leveraging the sibling combinator for altering the class of a sibling SVG element with the assistance of Material

Set up the Storybook Docs addon to showcase theme.dark

Using HTML and CSS to create a flexbox layout with multiple rows

What could be causing my React Swiper elements to slide when I click a button?

What is a way to increase the boldness of an HTML anchor tag when hovering without using CSS, but by modifying the inline style?