How to centrally position an image within a cropped parent container using CSS

Is there a way to center an img within a parent div tag that has overflow: hidden set? I am looking to clip the image equally on both sides in order to display the middle portion.

<div class='wrapper'>
  <img/>
</div>

The desired styling would be:

.wrapper {
  position: absolute;
  /* add positioning details here */
  overflow: hidden;
}
.wrapper img {
  height: 100%;
  margin-left: -??; //what should go here?
}

Using -50% as the width of the parent may not work, so how can we calculate the width of the img itself?

It's important that the solution is compatible with Firefox CSS standards.

css

Answer №1

Visit this link for demonstration

To center an image, utilize text-align, line-height, vertical-align, and negative margin in a wrapper element with specified dimensions. The img element will appear virtually reduced to zero size and automatically center itself within the container.

.wrapper {
  width:300px;
  text-align:center;
  line-height:300px;
  height:300px;
  border:solid;
  margin:2em auto;
  overflow:visible; /* visual representation of clipped content */
}
img {margin:-100%;vertical-align:middle;

  /* display hidden parts*/
  position:relative;
  z-index:-1;
}

For horizontal alignment only:

.wrapper {
    width:300px;
    text-align:center;
    border:solid;
    margin:2em auto;
    overflow:hidden
}
img {
    margin:0 -100%;
    vertical-align:middle;
}

Answer №2

Consider incorporating the following CSS properties:

display:block;
margin:0px auto;

within the styling for ".wrapper img"

Answer №3

Hey there, be sure to take a look at this demonstration

This will help you with your query

XHTML

<div class='container'>
    <img src="example.jpg" alt="Sample Image"/>
</div>

CSS

.container {
   /*style rules here*/
   border: 1px solid black;
   text-align: center;
}
.container 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

Is it possible to dynamically load a specific div when the page loads, relying on the

I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...

javascriptjqueryhtmlcss

Using percentages for CSS alignment and adjusting element widths

Greetings everyone! I have been struggling to align two divs - one on the right with a width of 30% and the other on the left with 70%. Despite my efforts, I have not been able to find a solution. I am hopeful that someone here can assist me. My setup inv ...

jquerycssjsfprimefaces

I encountered an issue while attempting to utilize a JavaScript script - I received an error message stating "Uncaught ReferenceError: jQuery is not defined."

Currently, I am utilizing a template with multiple pages and I need to use one of them. I followed all the necessary steps correctly, but I encountered an error in the console that says Uncaught ReferenceError: jQuery is not defined. Below is my HTML scrip ...

javascripthtmljquerycss

Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

I have a button that changes the body class to .blackout For this, I am utilizing js-cookie library to manage cookies. The code snippet associated with my button is shown below: <script> $('#boToggle').on('click', function(e) { ...

javascriptjquerycsscookiesdocument-body

Keep moving the box back and forth by pressing the left and right buttons continuously

Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...

javascriptjqueryhtmlcssjquery-animate

The interaction between a parent element and an iframe, combining mouseover/out events with clicking actions

I am brand new to programming and seeking some guidance. I came across a post about mouseover/out combined with click behavior that I found intriguing. However, I am struggling to implement it successfully in my code. Here is the code snippet: Child.htm ...

javascriptjqueryhtmlcss

Android not showing scroll bar in ion-scroll feature

I am experiencing an issue where a div with a fixed height displays a scroll bar on browsers but not on an Android phone. <ion-scroll style="height:300px;" scrollbar-y='true'> //content </ion-scroll> ...

cssangularjsionic-framework

Updating the active tab in the navigation bar whenever the router navigates

I'm struggling with changing the active tab in Angular 2 and Bootstrap 4. I have managed to get the active tab to change using this code snippet: navbar.component.html <nav class="navbar navbar-fixed-top navbar-light bg-faded"> <button cl ...

htmlcssangularbootstrap-4

What is the method for incorporating a link in an accordion header next to the toggle button with Bootstrap?

I'm attempting to enhance a link in the accordion-button so that only the arrow is clickable for collapsing. The CSS I added below makes the arrow clickable, but I am having trouble getting the link in the accordian-button to work. I want users to be ...

csstwitter-bootstrapbootstrap-5bootstrap-accordion

What causes my CSS to be disrupted by a line break in one instance but not in another? (view demonstrations)

https://i.stack.imgur.com/bitod.png In comparing this particular fiddle with another version of the same fiddle, the only variance is that in the second one, there is </label><label for="address_zip" class="zip"> without a line break following ...

htmlcsscharacter-encodingchar

The presentation of the Google graph with dynamically changing data appears to be displaying inaccurately

I am looking to incorporate a graph displaying sales and purchase data on my webpage. Users should be able to select from categories like Purchase, Sales, or Production. I have separate tables for Purchase (AccPurchase) and Sales (AccSales), with productio ...

javascriptphphtmlcssgoogle-visualization

The slides on SlickJS are initially loaded in a vertical alignment, but once the arrows are interacted with,

I've put together a demonstration that highlights the issue I'm facing. Upon visiting the contact section, you'll notice that all the slickJS slides are stacked vertically initially, but once you interact with them by clicking on the arrow o ...

javascripthtmlcssbootstrap-4slick.js

Is there a way to turn off the ripple effect on Material UI Input components?

Is there a way to turn off the ripple effect or highlight color on the TextField component in React's Material UI? https://i.sstatic.net/qB2cm.png I've attempted to modify the theme: theme.props.MuiTab.disableRipple = true theme.props.MuiButto ...

cssreactjsmaterial-ui

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir

I recently encountered a problem with my HTML/JS code that I thought was simple. The code is designed to expand the size of a div on mouseover and then collapse it back on mouseout. Here's how the code looks: CSS: .sign-in-up { position: absolut ...

javascripthtmlcssinternet-explorer-8internet-explorer-7

Tips for arranging 3 tables in the right place using CSS

I have 3 tables that I utilize. My goal is to: have one on the left side of the page place one in the center of the page position one on the right side All at the same height. The issue arises when the tables expand and using float causes them to ...

htmlcsshtml-table

Modify content or display picture within accordion panel based on its identifier

In my view, I have a model representing a list of items. Each item has a unique ID, which is included in the H2 header tag. The details of each item are displayed in a div below the header. Initially, there is an image within the header that is set to disp ...

javascriptjqueryhtmlcssjquery-ui

Exploring the integration of foreign languages within C# code?

In search of a C# expert who can assist me with a question I've been struggling to find an answer for all day. Google searches have yielded outdated information, and I need fresh insight. Wondering if there's a way to incorporate CSS and HTML in ...

c#css.netwinforms

What methods can be used to accomplish this effect using CSS and/or Javascript?

Is there a way to achieve the desired effect using just a single line of text and CSS, instead of multiple heading tags and a CSS class like shown in the image below? Current Code : <h2 class="heading">Hi guys, How can i achieve this effect using j ...

javascripthtmlcssnewline

The 3D card flipping animation is dragging on for an eternity

I'm experiencing a delay in triggering my 3D Card Flip animation on click, and I can't figure out why it's happening. If you want to see an example, please scroll down and click on any black and white picture here: Here is the code I' ...

jqueryhtmlcsscss-animations

Crafting a triangle's shape using user inputs and a button: a step-by-step guide

https://i.sstatic.net/EAvcU.png I recently created a form similar to the one shown above, but I omitted the triangles on the left and right sides. However, after implementing this feature, my form became static instead of adaptive (I specified sizes in pi ...

htmlcsscss-shapes