Comment autoriser des balises spécifiques à remplacer « overflow : hidded » ?

Autoriser une balise spécifique à remplacer le débordement : caché

Problème :
Vous avez un élément div avec une hauteur, une largeur et une largeur fixes overflow:hidden propriété pour découper toutes les images internes. Cependant, vous avez besoin d'une image dans le div pour s'étendre au-delà de ses limites.

Solution :
Pour y parvenir, vous pouvez positionner l'image débordante comme absolue dans un conteneur parent différent qui a une position relative.

<code class="css">/* parent with relative position */
.relative-wrap {
    position: relative;
}

/* container with overflow:hidden (no relative position) */
.overflow-wrap {
    overflow: hidden;
    height: 250px;
    width: 250px;
}

/* image to respect overflow */
.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
}

/* image to overflow */
.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
}</code>

Dans cet exemple, le div overflow-wrap a overflow:hidden, tandis que l'image interne respect-overflow respecte les limites. Cependant, l'image sans débordement est positionnée de manière absolue dans le div relatif-wrap, ce qui lui permet de s'étendre au-delà du overflow-wrap.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!