Using object-fit with the value of "cover" expands the size of the containing

Currently, I am setting up a grid for a blog where I have cropped the images using object-fill: cover; to ensure uniformity in appearance regardless of the image aspect ratio. However, this approach is causing an issue by stretching the parent element (a div) and pushing the title below the photo.

Below is a simplified version of the code snippet:

<div class="parent">
      <img src="#" class="child" style="max-height: 190px; object-fit: cover;">
      <h2>Title</h2>  
    </div>

Is there a solution to address this while still utilizing object-fit or should I consider an alternative method?

Thank you for your assistance.

Edit: Here is a snapshot depicting the current issue. View the problem here

css

Answer №1

If you're looking for the simplest solution, consider setting your image as a background:

.parent {
  background-image: url("https://www.uniqueimage.com/640/360");
  background-position: center;
}
<div class="parent">
  <h2>Title</h2>
</div>

In this approach, I've taken the image out of the HTML and incorporated it into the CSS background. You have the option to adjust the background properties according to your preference; in this case, I used background-position to center the image.

Alternatively, another method would involve positioning your image with absolute:

<div class="parent">

      <img src="#" class="child" style="max-height: 190px; object-fit: cover; position:absolute;">
      <h2>Title</h2>
      
</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 WordPress Customizer fails to update the CSS after making changes and saving them to an external stylesheet

I was looking for a way to improve the performance of my WordPress website by saving the styles from the Customizer into an external stylesheet for caching purposes. I found this code that allows me to save the custom styles into an external CSS file: $cs ...

phphtmlcsswordpress

In Chrome, there is a single pixel missing below the <dl> element

While my website's basic list looks great on Firefox and IE, there seems to be one missing pixel line in Chrome. Check out this JsFiddle link shared by Jared in the comments for reference. If you're not seeing the missing line, try adjusting th ...

htmlcsshtml-lists

In the IE7 standards mode, table cells with no content will have a height of 1px

When utilizing IE7 standards mode within IE9, empty table cells are automatically assigned a height of 1px. As a result, elements positioned beneath the table appear lower on the page than intended. To view an example of this issue, refer to the code provi ...

htmlcssinternet-explorerinternet-explorer-7

What is the best location to integrate jQuery UI Bootstrap in a Rails project

In order to use Bootstrap and jQuery UI together in my application, I decided to integrate jQuery UI Bootstrap. Unfortunately, many of the gems that handle asset pipeline integration seem outdated, so I opted to manually download the CSS files and insert t ...

jquerycssruby-on-railstwitter-bootstrapjquery-ui

How can I ensure that the scrollbar stays at the bottom using CSS at all times?

I have a container with a scrollbar containing various contents, functioning as a widget. Upon initialization, I position the scrollbar at the bottom. My aim is to ensure that regardless of any changes in the parent element or its placement elsewhere, the ...

javascripthtmlcss

When a page is loaded, CSS and images fail to load initially but successfully load upon refreshing the page

Hey everyone, I've set up a PHP MVC application with the following structure: helloworld - application - configs - controllers - models - layouts - include - library - public - .htaccess - index.php - design ...

phphtmlcss.htaccesszend-framework

CSS nested selector, target only the second level elements and disregard the first and any levels beyond the third

I have a complex structure with nested divs and classes. The hierarchy is as follows: row-container, row, row-content, col, and col-inner. Objective: I aim to target only the "col" class on the second level of the "box" class, while disregarding the f ...

htmlcss

Steps to activate highlighting for the initial value in a quarterly datepicker

Concerning the quarterPicker feature in the Bootstrap datePicker (SO: how-to-change-bootstrap-datepicker-month-view-to-display-quarters, jsfiddle: jsFiddle): Is there a way to highlight an initial value upon startup? I have tried setting a value in win ...

javascriptjquerycsstwitter-bootstrapdatepicker

Tips for placing a checkbox above a DIV element when generating checkboxes within a foreach loop

This is the output I have generated This HTML code belongs to me <td class="category" colspan ="2" id="tdcategory1"> <div id="category1" style="border:none !important; overflow:hidden; width:auto; height:auto"> </div& ...

jquerycssarrays

What's the best way to combine cells using HTML, CSS, and PHP?

Can anyone assist me with merging cells containing identical values in specific columns? <td style="text-align: center; font-size: 9.5px;">{{$endereco->quadra}}</td> <td style="text-align: center; font-s ...

phphtmlcss

The sequence of CSS and deferred JavaScript execution in web development

Consider this scenario: you have a webpage with a common structure in the <head>: <link rel="stylesheet" href="styles.css"> // large CSS bundle <script defer src="main.js"></script> // small JS bundle with defer attribute There is ...

javascriptcss

Explore the jQuery feature that allows you to hover over text

I'm facing an issue that has got me a bit stuck on how to resolve it. Currently, when hovering over this specific image, the opacity decreases (exposing a background color) and text appears. However, I want this effect to persist even when hovering o ...

javascriptjqueryhtmlcsshover

Seperating circles with a sleek HTML line

I'm attempting to create something similar to this: https://i.sstatic.net/lXELt.png However, this is the result I've been able to achieve. https://i.sstatic.net/Ieya0.png Can you assist me in achieving the desired outcome? UPDATE: The issue ...

htmlcssless

Ways to create the initial row text in jqgrid treegrid appear bold

Trying to make the text in the first row of a jqgrid treegrid bold? Here's what I attempted: #tree-grid .cell-wrapper { font-weight: bold; } However, this makes all nodes bold. How can I make only the first node (first row) bold? The treegrid i ...

javascriptjquerycssjquery-uijqgrid

creating unique styles for your Ionic app with Angular using JSON

Having trouble changing the item color. Does anyone know why my CSS isn't working, or if I'm missing something? <ion-view title="Add order to a table"> <ion-content class="has-header has-subheader"> <ion-list> ...

cssangularjsjsoncordovaionic-framework

Interested in implementing Bind and Unbind functionality to enable hovering over a different row after selecting a radio button

Can someone assist me in incorporating the Bind and Unbind functions? I have a table with multiple rows, each containing radio buttons. Currently, when I hover over a row it changes to light blue. However, once I select a radio button, I can no longer hove ...

jqueryasp.nethtmlcssradio-button

Troubleshooting HTML image visibility issues

I've been trying to get a Tumblr icon to display in the upper-right corner of my HTML-based page, but all I see when I open it in a browser is a white box with a gray outline. The code I'm using for the image is: <img style="float: right; mar ...

htmlcssimageicons

Can a PHP variable be passed along with a div ID in any way?

I am attempting to transfer a PHP value through the "href" attribute from one div to another. While we can achieve this between pages, like so: <a href="somepage.php?id=<?php echo $id;?>"></a> Is there a way to accomplish this using an ...

phphtmlcss

How come my flex-box navigation bar is not collapsing as I shrink the browser window size?

I'm currently experimenting with FlexBox to enhance the design of my website, specifically focusing on creating a responsive and collapsible navigation bar for mobile users. I'm encountering issues with the flex commands in the .nbar class not wo ...

htmlcssflexbox

React Scroll and Material-UI button active link not functioning correctly

Whenever the link goes to the correct page, I want to add a special background effect or change the font color. Despite trying to use CSS for this purpose, it didn't work as intended. If you want to take a look at my code on codesandbox, follow this ...

javascriptcssreactjsmaterial-uireact-scroll