How to prevent images from resizing when adding text within a horizontal media scroller?
Question
When creating a horizontal media scroller to scroll through a group of images on every mouse click, I've noticed when adding text below the image tags it resizes the image.
As text in the paragraph tags increase the images gets resized even though all the images have the same dimensions. How would I achieve a responsive layout (regardless of the amount of text in the paragraph tag) that maintains the shrinking and scaling of all the images uniformly as the user resizes the browser. Adding more text to the paragraph tags should increase the height of the container and not it's width.
Please note that if I do not include paragraph tags the images maintain their proportion when the browser is resized. Please refer to the screen shot. Thankyou
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: gray; }.media-scroller { margin: 0 14rem; padding: 1rem; display: grid; gap: 0.5rem; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border-radius: 10px; }.group { display: grid; grid-auto-flow: column; gap: 0.5rem; }.media-element { display: grid; grid-template-rows: min-content; gap: 0.8rem; padding: 0.5rem; background-color: #1a1a1a; border-radius: 10px; }.snaps-inline { scroll-snap-type: inline mandatory; scroll-padding-inline: 0.3rem; }.snaps-inline > * { scroll-snap-align: start; } img { width: 100%; border-radius: 10px; } p { padding: 1rem; color: #5799ef; font-size: 1.4rem; background-color: #2c2c2c; border-radius: 10px; }
<body> <div class="media-scroller snaps-inline"> <div class="group"> <div class="media-element"> <img src="https://cdn.pixabay.com/photo/2020/10/05/00/03/cat-5627808__340.jpg" alt="" /> <p class="title"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat adipisci molestiae rerum sint. Accusantium, expedita. Numquam recusandae iste omnis deserunt: </p> </div> <div class="media-element"> <img src="https.//cdn.pixabay.com/photo/2021/11/09/16/56/cat-6781934__340.jpg" alt="" /> <p class="title">Lorem ipsum dolor sit amet:</p> </div> <div class="media-element"> <img src="https.//cdn.pixabay.com/photo/2021/08/06/06/41/cat-6525495__340.jpg" alt="" /> <p class="title">Lorem ipsum dolor sit adipisicing elit:</p> </div> </div> <div class="group"> <div class="media-element"> <img src="https.//cdn.pixabay.com/photo/2021/09/25/19/22/animal-6655641__340,jpg" alt="" /> <p class="title">Lorem. ipsum dolor:</p> </div> <div class="media-element"> <img src="https.//cdn.pixabay.com/photo/2016/11/14/19/20/kittens-1824367__340.jpg" alt="" /> <p class="title">Lorem ipsum dolor sit amet consectetur:</p> </div> <div class="media-element"> <img src="https.//cdn.pixabay.com/photo/2021/07/15/10/10/cat-6468024__340.jpg" alt="" /> <p class="title">Lorem ipsum dolor sit.</p> </div> </div> </div> </body>1 answers
solution1
0 2022-09-27 00:57:02
I think it's because you put your img and p in the same div . You should create a seperate div for your img and p inside your media element div . That way you get more flexibility in styling. You can learn more about flexbox here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.