Picture Escaping Parent Container

I'm currently working on creating responsive cards. The cards are looking good and properly spaced out. However, I am facing an issue with the image placement on the front of the cards. I want the image to be at the top with a title in the middle. The title is positioned correctly, but the image on the right side is not aligned as expected. Below is the CSS code used for the image (the image is placed within an img tag with a class of "image" in the HTML page):

div .image {
    padding: 5%;
    height: 45%;
    width: 100%;
}

For some reason, the right side of the image seems to be ignoring the padding and extending beyond the boundaries of the parent card div. Can anyone provide any insights into why this might be happening?

cssimagepaddingimage-resizing

Answer №1

Ensure the width is set to 100% with a padding of 5%. It is important to include:

box-sizing: border-box;

for the parent element. Without the complete code example, providing an accurate solution can be challenging. One way to address any overflow issue is by using overflow: hidden; on the parent element to conceal any parts that protrude.

Answer №2

Have you made sure to specify the width of the div element? It's generally not necessary to set the height of an image if you've already set its width to 100%.
Here are some sample CSS rules:

div { width: 300px; height: 200px; padding: 10px; }
div img { width: 100%; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am looking to split an array into smaller subarrays, each containing 5 elements, and assign a distinct class to the elements within each subarray. How can I

I have a group of "n" "li" elements that I would like to split into "x" subsets using jQuery. Each subset should contain 5 "li" elements, and I also want to assign a different class to each subset. <ul> <li>text1</li> <li>text2&l ...

javascriptjqueryhtmlcss

I seem to be having trouble with my dropdown menu, can anyone help me figure out what I might be doing wrong

I'm new to web development and I'm trying to create a dropdown menu. The issue is that when I hover over a specific element, it takes up more space than expected. My goal is for it to appear below the "shop" element. I'm not sure where I&a ...

htmlcssdrop-down-menu

Assistance needed with CSS - making an element occupy the entire remaining vertical space

Although I'm quite confident in my CSS/XHTML abilities, this particular issue has me stumped. You can view the problem here: - (please note that the website is still under development, most features are not functional, and it's subject to frequ ...

cssxhtml

Error: The Vue bind object property cannot be read because it is undefined in the class binding

I'm attempting to associate a class with an object property, but I encounter an issue when trying to trigger the @click event on the list object - the console states that it cannot read the isSelected property of the object. My goal is to activate a c ...

csslistvue.js

Using CSS (HTML), I placed a LOGO (image) at the center of the top border

I have a <div> with a red border on top and left side. The border-radius is: 16px 4px 10px 4px However, I want to overlay an svg-image over the top border, like in this picture: EXAMPLE IMAGE Is there a way to break or stop the red top border in a ...

htmlcssimageborderborder-image

Having trouble with individuals gaining access to my gh-pages on Github

After creating a gh-pages repository on Github to showcase my portfolio, I encountered an issue where visitors were being prompted to log into Github in order to view the page. Gh-pages are intended to be public, so I am unsure why this is occurring. My ...

htmlcssgithostinggithub-pages

Tips for centering a div horizontally when it exceeds the width of a mobile screen

My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...

javascripthtmlcss

Organizing your thoughts: Utilizing Etherpad-Lite's list

Looking to stylize the list items with decimal, upper-alpha, lower-alpha, upper-roman, and lower-roman for each of the first five levels? I attempted to achieve this by adding CSS in my pad.css file. .list-number1 li:before { content: counter(first)") " ...

cssetherpad

What is the best way to center a single element perfectly between two other elements within a container that is positioned absolutely in the center of the window?

I need to create a markup that has the following structure: <div id="container"> <div id="left"> This is the main text. </div> <div id="center"> Hello! </div> <div id="right"> some content </div> ...

htmlcss

Is there a way to adjust my menu so that there is enough space for the dropdown elements, particularly the one with a white background?

I am facing an issue with adjusting the spacing in my menu list and its elements: https://i.sstatic.net/nOD8o.png I want the space to display with a white background and I want the list to occupy all available space. This is the effect I am aiming for: ...

htmlcss

Struggling to hide the footer from appearing as I scroll upwards on the page

I'm currently in the process of creating a footer for my website. Even though it's positioned at the bottom, it seems to constantly appear on the screen, whether I'm browsing at the top, middle, or bottom of the page. Goal: The aim is to ke ...

cssbootstrap-4

What Happens When You Click on a Link in Google News Using the Mobile Chrome Browser

When using the Chrome Browser on mobile to open a news link from Google News, a new tab is opened. To return to Google News, users can click on the white-highlighted "left arrow" below or find a small header with a "<" symbol above to navigate back. Ho ...

javascripthtmlcss

Is it possible to apply identical css styles to multiple ids at once?

Is there a way to accomplish this? .apple, .orange, .kiwi h1 {color: #892828;} I'm having trouble making it work. Any suggestions? ...

css

When you click on the button, the section will not be displayed

I'm facing an issue with my code. I have a set of five buttons and corresponding sections. When a button is clicked, the active and active-btn classes are supposed to be added to that button as well as the corresponding section element with the same i ...

javascripthtmlcsssass

In what ways can the accessibility of a website be impacted by using CSS

After reading numerous articles on Google and Stack Overflow, I have decided to ask my question straightforwardly in the hopes of receiving a clear and direct answer. Adding another layer to the discussion about whether Does opacity:0 have exactly the sam ...

cssaccessibilityopacitywai-aria

Incorporating external files into Javascript code may cause issues with its functionality

Currently, I have a fully developed PHP theme that I am in the process of designing. Within this theme, I have integrated an image slideshow plugin to enhance its functionality. The following code represents the implementation of the image slideshow: &l ...

javascriptphpjqueryhtmlcss

Is there a way to shift a button within a div to the right while maintaining alignment?

After spending hours on this problem, I attempted to use "float: right" and successfully moved the button to the right. However, in doing so, the tag is no longer vertically centered. Can someone please assist me with this? Also, if there are multiple sol ...

css

I desire a three-column layout where the middle column will expand in width if columns 1 and 3 are vacant

I have a three-column layout designed without using tables. <div id="main"> <div id="left"></div> <div id="content"></div> <div id="right"></div> </div> This is the CSS code: #left {width: 200px;fl ...

asp.netjqueryhtmlcss

Determine if the browser is utilizing GPU acceleration for rendering graphic content

Currently working on a large-scale website that utilizes CSS3 transitions for animations (leveraging jaquery.transit to manipulate element transitions and their CSS styles). Encountered two challenges in the process: It appears that Firefox (latest updat ...

javascriptcssasp.net-mvc-4gpumozilla

Manipulating the "is-invalid" class in CodeBehind with ASP.NET

I'm in the process of developing an ASP site that requires users to fill out a form. I have incorporated textboxes, dropdown lists, and utilized Bootstrap 4 for styling purposes. The entire content is enclosed within an update panel to ensure a respon ...

c#cssasp.netbootstrap-4