What causes the size of an image to decrease when placed within an anchor tag?

Question

What causes the size of an image to decrease when placed within an anchor tag?

Trying to add clickable social media icons, but when wrapped in an anchor tag the images shrink significantly.

<span class="iconspan">
                    <a href="https://www.instagram.com/lil_ijoez/" target="_blank"><img src="assets/icons/instagram.png" alt="instagram icon" class="icons"></a>
                    <img src="assets/icons/apple.png" alt="apple music icon" class="icons">
                    <img src="assets/icons/youtube.png" alt="youtube logo" class="icons">
                    <img src="assets/icons/soundcloud.png" alt="soundcloud logo" class="icons">
                    <img src="assets/icons/amazon.png" alt="amazon logo" class="icons">
                    <img src="assets/icons/spotify.png" alt="spotify logo" class="icons">
                </span>

.icons {
    width: 10%;
    padding: 2em 1em;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.icons:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.iconspan {
    display: flex;
    justify-content: center;
}

view image description here

html css

Answer 1

Answer №1

The width of the elements has been defined as a percentage, making them relative to the parent element rather than the span itself. This means that their size is now determined by a percentage of the anchor's width.

Answer 2

The width of the elements has been defined as a percentage, making them relative to the parent element rather than the span itself. This means that their size is now determined by a percentage of the anchor's width.

Answer 3

Answer №2

Because the presence of

<span class="iconspan">

turns it into a flex container, only its direct children will be treated as flex-items.

This means that .iconspan > a will be considered a flex-item, but .iconspan > a > img will not.

To resolve this, you can apply display: contents; to the a element. This property essentially ensures that all immediate children of a are treated as if they were immediate children of a's parent, thus rendering the img as a flex-item once again.

.iconspan > a {
    display: contents;
}

As a result, you can streamline your styles with the following adjustments:

span.iconspan { /* You may want to remove the word "span" from "iconspan". */
    display: flex;
    justify-content: center;
}

    span.iconspan > * {
        flex-basis: 10%;
        padding: 2em 1em;
        transition: transform 0.3s ease-in-out;

        /* Avoid specifying `-webkit-transform` unnecessarily. */
        /* Do not set `transform: scale(1)` in the default state as it creates a new stacking-context and impacts performance. */
    }
    span.iconspan > *:hover {
        transform: scale(1.1);
    }

Answer 4

Because the presence of

<span class="iconspan">

turns it into a flex container, only its direct children will be treated as flex-items.

This means that .iconspan > a will be considered a flex-item, but .iconspan > a > img will not.

To resolve this, you can apply display: contents; to the a element. This property essentially ensures that all immediate children of a are treated as if they were immediate children of a's parent, thus rendering the img as a flex-item once again.

.iconspan > a {
    display: contents;
}

As a result, you can streamline your styles with the following adjustments:

span.iconspan { /* You may want to remove the word "span" from "iconspan". */
    display: flex;
    justify-content: center;
}

    span.iconspan > * {
        flex-basis: 10%;
        padding: 2em 1em;
        transition: transform 0.3s ease-in-out;

        /* Avoid specifying `-webkit-transform` unnecessarily. */
        /* Do not set `transform: scale(1)` in the default state as it creates a new stacking-context and impacts performance. */
    }
    span.iconspan > *:hover {
        transform: scale(1.1);
    }

What causes the size of an image to decrease when placed within an anchor tag?

Answer №1

Answer №2

Similar questions

Is it a mistake in the Jquery logic or a syntax error?

Positioning HTML elements using Python

Display a jQuery loading window

Extracting data from an HTML table on a website

Guide on setting up p-menubar in PrimeNG to expand in the opposite direction, from left to right, for the responsive

Enhance Your jQuery Skills: Dynamically Apply Classes Based on URL Like a Pro!

Switching between filters using AngularJS toggle buttons

CSS code that fixes a textarea at the bottom of a div

The issue with the class attribute being disregarded by Internet Explorer

Looking for assistance in creating a stunning portfolio showcase?

Top way to include an HTML and javascript file in an Ext.Panel within Sencha Touch

Perform an AJAX request to an encrypted URL with an unverified certificate

Issue encountered when toggling flip switch in Jquery Mobile

How to Incorporate LessCSS into the Blueprint Framework?

Using jQuery to reveal and conceal elements upon hover interaction

The HTML code does not seem to be acknowledging the CakePHP link

Create a bokeh plot and save it as an HTML file without displaying it

Tips for creating several radio buttons with separate functionality using Bootstrap 5

Struggling to make align-content function properly in a CSS flexbox layout grid

What is the best way for Selenium in C# to identify and locate a specific span element by its value