CSS HTML parent div cannot contain image properly

Creating a website using Bootstrap:

<div class="row padding_zero">
    <div class="col section px-0">
      <img class="img-trans padding_zero" src="./svg/clouds-00.svg" style="margin-top: -150px"/>
    </div>
  </div>

  <div class="row padding_zero">
    <h1 class="pick_your_color animate">Choose Your Color</h1>
  </div>

.img-trans {
  position: absolute;
  bottom: 0;
  z-index: 0;
}

.section {
  height: 100vh;
  position: relative;
}

The issue I'm facing is that the image always extends beyond the boundaries of the parent div. Any suggestions on what might be causing this problem?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Adjusting the size of an element within a parent element can be achieved using the CSS property object-fit.

  1. fill: This default value stretches the image to fit the parent container, ignoring its aspect ratio.
  2. contain: This option sizes the image based on the parent element's dimensions while preserving the aspect ratio.
  3. cover: The image fills the container both vertically and horizontally, maintaining its aspect ratio but potentially cropping parts of the image.
  4. none: The image displays in its original size regardless of the parent element's dimensions.
  5. scale-down: This value compares the sizes of the image and container, fitting the image to the smaller of the two.
.img-trans {
  position: absolute;
  bottom: 0;
  z-index: 0;
  object-fit: fill;
}

Answer №2

.pic-transform {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  z-index: 0;
}

It is important to set the width and height of your image if it may exceed the size of its parent element.

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

Develop a dynamic animation using gradient and opacity properties

I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but ...

javascripthtmlcssgradient

Is it feasible to execute exe files within a ReactJS environment?

Hey there! I've created a Game Launcher using ReactJS for my Unity game and was wondering if it's feasible to start the game (an exe file) simply by clicking on the play button. Can anyone please advise me on this? ...

javascripthtmlcssreactjs

Include an edit button with each row in an HTML table for seamless editing of the database

I am currently exploring php and seeking assistance with a project for my internship. I have successfully queried all records from the mysql database and displayed them in an html table. However, I now want to include an edit button in a separate column fo ...

phphtml

What are the steps to modify the MIME type in order for the browser to correctly display a CSS

I'm encountering an issue where my CSS code is not rendering in the browser, and it seems to be related to MIME types (which I'm not familiar with). I am using EJS as a template engine. The error I see in the console is... Refused to apply sty ...

cssnode.jsejsmime

Creating a tree with branches using divs: a comprehensive guide

I have been tasked with designing a tree structure for a project that will visually represent the results of a quiz. The tree needs to have branches on both sides, featuring 4 main branches, each with 5 smaller branches extending from them. Additionally, I ...

htmlcss

What exactly does the "data-effect" attribute refer to?

After downloading a code, I came across the following line: <button data-effect="st-effect-4">Slide along</button> I noticed that "st-effect-4" is a class name in the code, but I am curious to know what exactly this data-effect attribute is u ...

htmlcss

Error when the class is not found + Application

I am attempting to create my debut Applet named MemoSaver2.java In addition, I have crafted the following html: <html> <object classid="java:MemoSaver2.class" type="application/x-java-applet" archive="MemoSaver2.jar" he ...

javahtmlappletnoclassdeffounderror

The Google Map is not showing all the details

Our app is developed using ReactJS on Rails API, with a Google map integrated. However, when visiting this link and clicking "Map View", some grey space appears under the Google Map. An example image can be found here: example We are having trouble findi ...

javascriptcssreactjsgoogle-maps

Unable to apply background-color CSS in playwright is not working as expected

I have been encountering an issue with applying the background-color CSS property in a Python template using the playwright package. I initially attempted to apply inline CSS style="background-color:red", then tried using a script tag with JavaScript, an ...

pythonhtmlcssplaywrightplaywright-python

The width of the table remains consistent

I have created a division that includes two tables stacked on top of each other. However, I am facing an issue where the width of the second table remains fixed and does not change even when I try to increase it. Here is the code snippet below: functio ...

javascriptjqueryhtmlcss

How to make the parent div adjust its height to fit the children [CSS]

I am facing an issue with my parent div's height when adding more children. Despite setting the height of the parent to auto or not specifying a height at all, it ends up with a random height that does not seem to match the sum of its children. Even i ...

htmlcss

What is the main purpose of using the CSS transform:translate() property?

When CSS3 introduced animations with transition properties, it gave developers two main ways to change the position of an element. The first method involves setting the element's position as absolute and adjusting the left, right, top, and bottom prop ...

htmlcsstransition

Chrome isn't displaying the text color of the link

I'm having an issue with a link that is styled like a button. It looks fine in Internet Explorer and Firefox, but not on Chrome. For example: The problem lies with the teal button in the center of the page that reads "follow issue." I intended for ...

htmlcss

The hyperlink is not functioning properly because of the CSS code

I found a helpful menu on this site http://www.jqueryscript.net/menu/interactive-menu-css3-jquery.html However, I encountered an issue. When I click on <a href="1.html">Application 1</a> It doesn't redirect to 1.html as expected. The p ...

htmlcss

What is the best way to utilize a single component from Twitter Bootstrap?

Is there a way to use the Twitter Bootstrap plugin from this website ( https://github.com/silviomoreto/bootstrap-select ) for only one specific element on my webpage? I don't want all elements on my site to adopt the Twitter Bootstrap styling (such as ...

htmlcsstwitter-bootstrap

Adjust the placement of image when changing the size of the window

Is there a way to prevent an image with a fixed position from covering up page content when the browser window is resized? <div > <img id="img1" class="wrapperImage"></img> </div> <style type="text/css"> .wrapperImag ...

htmlcss

Change the background color of the entire grid page to create a unique look

Is there a way to make the background color different for blocks 3 through 6 while maintaining a full-page background color effect without any padding or margin? .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5%; ...

htmlcsscss-grid

Using Rails to reference an image in CSS

My application on Heroku, built with Rails, features a striking image as the background on the landing page. Since Heroku's file system is read-only, I made the decision to store these images (selected randomly) on AWS S3. In my .css(.scss) code, the ...

cssruby-on-railsrubyamazon-s3sass

React Transition for Mui Menu

I'm having trouble implementing a Mui menu on my website and adding a transition effect from the right side. Here is the code I have tried: <Menu transitionDuration={1} open={Open} onClose={Close} MenuListProps={} className="nav"> ...

cssreactjsmaterial-uimenu

update url to redirect hashbang with history.js

Upon further investigation, I have observed that history.js has the ability to automatically transform http://www.site.com/some/path#/other/path into http://www.site.com/other/path when used with a html5 enabled browser. While this feature is useful, ...

javascripthtmlbrowserhistory.js