The dimensions of the image are not conforming to the div's size

I am experiencing an issue with a div that contains an image. The image is not respecting the size of the div and is overlapping it.

.bs-col-md-6 {
  box-sizing: border-box;
  -ms-flex-positive: 0;
  flex-grow: 0;
  0;
  */ -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-left: 15px;
  padding-right: 15px;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}

.bsp-login-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
<div class="bsp-xs-hidden bsp-sm-hidden bs-col-md-6">
  <img class="bsp-login-banner" src="assets/img/Login.jpg" alt="the image is here" />
</div>

https://i.sstatic.net/IhMTq.jpg

Could someone assist me in resolving this issue?

htmlcss

Answer №1

Avoid using position: fixed as it will remove the element from the normal flow of other elements on the page (except for the window/viewport).

If you're not sure what you need, consider using position:absolute with position: relative applied to its parent to establish a reference point for its position (and somewhat for its size, if specified).

Answer №2

For proper display based on the image, it's important to provide an appropriate size for the div element.

The issue with fixed positioning is that it may lead to scenarios where the fixed element covers content making it difficult to access. It's essential to ensure there is enough space to prevent this or consider using relative or absolute positioning as alternatives.

Answer №3

.bs-col-md-6 {
    box-sizing: border-box;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-left: 15px;
    padding-right: 15px;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  
  .bsp-login-banner {
    width: 50%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    z-index: 1;
}
<div class="bsp-xs-hidden bsp-sm-hidden bs-col-md-6">
      <img class="bsp-login-banner" src="assets/img/Login.jpg" alt=""/>
</div>

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

The window.open function is returning a null value after attempting to open the specified

Is there a way to prevent users from opening more than one IFrame window for my application? I have included the following code: <html> <head> <title>Testing Window Opening Limitation</title> <meta http-equiv="Content-Type" cont ...

javascriptjqueryhtml

What's the reason for not being able to customize classes for a disabled element in Material-UI?

Currently, I am utilizing Material-UI to style my components. However, I am facing challenges when trying to customize the label class for disabled buttons. Despite setting a reference as "&$disabled", it does not yield the desired results. import Rea ...

javascriptcssreactjsbuttonmaterial-ui

Updating an item stored locally

I am currently working on a web application that utilizes local storage. I have successfully implemented functionality to add and delete items, but I am facing an issue with editing items. Although items can be edited as expected, upon refreshing the page, ...

javascripthtmllocal-storage

How to place an image in the bottom right corner using CSS

Does anyone know how to position an image in the bottom right corner of a div? I have tried using margin-right and padding-right with 0px on the img tag, but it does not seem to work. The black lines indicate that I do not need that space Here is my Cod ...

htmlcss

I'm having trouble with my fullscreen menu. Is there something I missed when setting it up?

Hi there! I'm currently working on my website and I seem to have run into an issue with the code. I'm still new to coding, so I would appreciate some assistance in identifying where I went wrong. I've been going through the code diligently t ...

jqueryhtmlcssnavigationbar

Is the HTML templating mechanism compatible with Angular?

Trying to implement HTML templating in my Angular application, my code looks like the following: <script type='text/html' id="sampleId">...</script> However, upon loading the HTML, I noticed that the script block was not present in ...

htmlangularangular2-templateclient-side-templating

Following the completion of the inspection, the next step

Check out my work at this link: Unfortunately, my code is too lengthy to include here, so please refer to the link above to see the issue I am facing. The problem I am encountering is that when I click the checkbox after adding an item to the list, the r ...

javascripthtmlcss

Grid of squared CSS elements contained within a wrapper div that is set to a maximum

When attempting to create a CSS grid layout with square boxes, I encountered an issue. While the first row of squares remains square when setting the maximum height of the wrapper, subsequent rows are cropped into rectangles instead. The culprit seems to b ...

htmlcsscss-grid

The battle between Hover, Focus, and Blur modes intensifies

My goal is to implement 4 different effects on an element: When hovering over the element. When moving away from the element. When focusing on the element. When blurred. However, I'm encountering a conflict where when I focus on the element, the ...

javascriptjqueryhtmlcss

series of lines including <ListItemText>

https://i.sstatic.net/L8FUC.png I have been using Material-ui with react. Currently, I am working on creating a list in React that contains long text. However, when the text is too long, it is displayed as a single line which is not what I want. I would ...

cssreactjsmaterial-ui

Can you provide step-by-step instructions on how to customize styles with MUI in my application?

I am encountering issues with MUI while attempting to customize the color of my buttons. The two methods I have tried so far have been unsuccessful. For example, Method 1: import React from 'react' import { Typography } from '@mui/material& ...

cssreactjsmaterial-ui

Tips for showcasing model data dynamically on a webpage using HTML

My model is constantly updating within a function, and I need a way to dynamically display this updated data without the need to refresh the page. How can I achieve this? models.py class MyLongProcess(models.Model): active_uuid = models.UUIDField(&apo ...

javascriptpythonhtmldjangoajax

Leveraging tailwind for achieving dynamic height responsiveness

My Tailwind-built page currently has a table in the bottom left corner that is overflowing, and I would like it to adjust its size to fit the available space and scroll from there. I want it to fit snugly in the bottom left corner of the browser viewport ...

csstailwind-css

Modify the animation on Material UI Autocomplete with an underline effect

In my project, I am utilizing a Material UI Autocomplete component for the "Faculdade" field. Nonetheless, I have observed that the animation/transition effect when this component is focused involves spreading from the middle outwards. I desire the animati ...

cssreactjsanimationautocompletematerial-ui

Is there a way to automatically load a page?

Is there a way to automatically load another page without clicking on a link? I have a website with PayPal options available, and I want to know if there is a way to load the PayPal code without the need for a click. Can anyone help with this issue? < ...

phpjqueryhtmlpaypal

Unsuccessful passing of the popstate event in jQuery bind

Currently, I am working on a small demo using the History API, but I seem to be facing some challenges: $(window).bind('popstate', function(event) { console.log('pop: ' + event.state); }); When I click on the 'P ...

jqueryhtmlhtml5-history

Animate the toggling of classes in jQuery

Here is a code snippet that I came across: $('li input:checked').click(function() { $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000); }); This code is functioning correctly when the element is clicked for the first time. I ...

javascriptjqueryhtmlcss

Utilizing jQuery to Record the Status of HTML5 Forms

Can jQuery be used to track the status of an HTML5 form element? For instance, if a user enters an invalid email address in the email field, can jQuery detect this event and take action such as disabling the submit button until a valid email is entered? ...

jqueryhtml

How to place a circle below text using CSS

I'm attempting to center a 5px x 5px circle under the links in a navigation bar to indicate the current page, but I'm uncertain about how to achieve this effect. Here is the current outcome: Link to Image This is what I aspire to accomplish: Li ...

htmlcssshapes

Choosing bookmarkable views in Angular 5 without using routes

I'm currently working on a unique Angular 5 application that deviates from the standard use of routes. Instead, we have our own custom menu structure for selecting views. However, we still want to be able to provide bookmarkable URLs that open specifi ...

javascripthtmlangular