How to prevent the converted elements from overflowing and automatically cutting them off?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How to prevent the converted elements from overflowing and automatically cutting them off?

P粉242535777 2023-09-07 20:04:02

521

I'm using Bootstrap 4 to make a modal gallery for a friend's personal website. I set it up so that the images expand on hover - but when I set overflow to auto, they get cut off at the edge of the modal (or div). The Gallery is also the third in a set of tabs, but all of them work great.

I've tried changing which div has the overflow-auto class; I've tried tagging it with various different tags but no matter what I try, I can't figure out how to make it so that the gallery scrolls and has my image on hover Will not be cut off. Now the relevant code:

.gallery { overflow:visible !important; z-index:999; } .gallery-img { background-color:#ffeaf2; height:10rem; margin-left:0.5rem; margin-top:0.5rem; padding:0.3rem; transition: transform .5s; width:auto; } .gallery-img:hover { box-shadow: 0 0 3px 3px #ffeaf2; transform: scale(2); z-index:999; }

  Gallery

If you need more information, please let me know! This is my first time posting here :)

P粉242535777

reply all (1)

P粉7970046442023-09-08 11:23:54 1 floor

You need to add enough padding to the gallery so that when you enlarge the image, there is enough room to accommodate the scaled version without any overflow occurring.

.gallery { padding: 3rem; overflow: auto; height: 300px; border: 1px solid red; } .gallery-img { background-color: #ffeaf2; height: 10rem; margin-left: 0.5rem; margin-top: 0.5rem; padding: 0.3rem; transition: transform .5s; width: auto; } .gallery-img:hover { box-shadow: 0 0 3px 3px #ffeaf2; transform: scale(1.5); }