Shift visual elements using measurements

Let's say my image size is 960x960, but the height of the img element is set to 720px.

<img class="imgs" src="~/test.jpg" />

Here are the styles for .imgs:

.imgs {
    width: 100%;
    height: 45rem;
    object-fit: cover;
}

Can I use object-position to adjust the position of the image top/bottom or other directions? Is it possible to move the image using specific units?

To illustrate this concept, imagine a black line representing a div and a red line representing the image:

When using object-position: top, it looks like this:

obj-pos-bot

When using object-position: bottom:

obj-pos-top

However, I want to not only align the image at the top with object-position: top, but also move its content slightly upwards (by a few pixels). I've attempted to achieve this using margin and padding, but it ends up moving the entire element rather than just the content.

My desired result is depicted here:

result

css

Answer №1

If I understand correctly, you are looking to center your image content within the box. This can be achieved by using the CSS property object-position.

Simply replace the values top, bottom, etc. with the units of your choice; for example:

object-position: 50% 10px;

The first value adjusts the horizontal position, while the second value adjusts the vertical position.

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

Dynamic Column Image and Text Display

I am working on a website where I am trying to have an image on the left and a paragraph on the right, but when the screen size is reduced, I need the layout to switch so that the image is at the top and the paragraph is at the bottom. Even though I have ...

htmlcssflexboxresponsive

jquery sequential fade effect

I am trying to make each div fade in one by one. Visit this link for reference <div id="w"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> $(function() { $(&a ...

javascriptjquerycss

why isn't bootstrap 4 pull-xs-right functioning properly?

I am utilizing Bootstrap 4 utilities to align buttons to the right of the screen in my HTML, and it is achieving the desired effect. However, I am facing an issue where the buttons are not pushing down the content below them as anticipated. Instead, they ...

cssbootstrap-4

With Vue's new implementation of adding data attributes to the "*" selector, how can I adapt to this change?

Typically, I reset all margins/paddings by including the following code snippet at the beginning of my CSS: *, body { margin: 0; padding: 0; } This method usually works fine since it is overridden by subsequent selectors. However, Vue appends data att ...

cssvue.jsbuild

When I zoom in, my h1 tags shift to the right

I am relatively new to this and I am puzzled as to why the text inside my h1 tag seems to shift to the right when I zoom in. Below is the CSS code: h1 { font-family: 'Raleway', sans-serif; border-bottom: 1px solid black; border-top: ...

htmlcsszooming

Personalize Drop-Down Selection

Currently implementing bootstrap on a site and seeking to enhance the dropdown menu customization. The default navbar appearance is present, with dropdown elements appearing upon hover. My goal is to include an icon next to each item in the navbar and ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

Determine whether the child element extends beyond the boundaries of the parent element

I am currently working on determining whether a child element is visible within its parent element. To achieve this, I am comparing the width of the parent element to the position of the child element using position().left. Given that I have multiple dist ...

jquerycss

Looking for advice on designing a unique Gallery layout using CSS?

Tasked with converting various layouts, some of which utilize a specific layout pattern (refer to the image below.) I'm seeking advice on the most efficient way to use CSS to display a list of images in this manner without dividing items into separate ...

htmlcss

The dropdown height feature is experiencing issues in the Chrome browser

3 radio buttons and a single select box are displayed on the page. When clicking on the first radio button, the select box should show contents related to the first radio button. However, when selecting the second or third radio buttons, the select box hei ...

javascriptjqueryhtmlcss

Having trouble repositioning a div element in CSS

I am having an issue with my code. The problem I'm facing is that I am unable to move the green div.free_space below the other two divs, div.main_pic and div.navigation. I don't understand why this is happening. As I am still learning, I would g ...

htmlcss

What is the best way to remove a border piece with CSS?

Currently, I'm attempting to achieve a matrix effect purely through HTML and CSS. One method I have come across involves applying a solid border and then removing certain parts at the top and bottom. Does anyone know if it's possible to create th ...

javascripthtmlcss

When an element possesses a particular class, modify the css styling of a different

My menu is an unordered list, with each menu item gaining the "active" class when clicked. This works perfectly fine. However, I have an arrow positioned absolutely and its "top" style needs to change based on which list item has the "active" class. Curr ...

jqueryhtmlcssconditional-statements

Safari iOS does not properly support responsive images when using srcset and sizes

I am facing an issue with the following code snippet: <img src="/img/footer/logo_white.png?v=2.0" srcset="/img/footer/logo_white.png?v=2.0 1x, /img/footer/logo_white2x.png?v=2.0 2x" > This ...

htmlcssresponsive-imagessrcset

Unable to supersede CSS module styling using global or external stylesheets in React, Next.js, or React Native

I'm facing a challenge finding a solution to a basic issue. I have a component that is initially styled using a class from a *.module.css file. However, I want to replace this style with one from a global stylesheet or another stylesheet but I can&apo ...

javascriptcssreactjsnext.jsjsx

Switching Logo Image when Menu Button is Clicked

I'm looking to adjust the color of my logo when the menu button is clicked to match the overlay style. Currently, I managed to switch from a black logo to a white logo. However, when attempting to close the menu, it doesn't revert back to the bl ...

javascripthtmlcss

What's the best way to reduce the dimensions of this container in order to align them next to one another?

https://i.sstatic.net/VHahe.jpg As a novice student in the world of coding with html and css, I have embarked on a project to create a website. However, I've encountered a minor issue... I'm looking to adjust the width of these boxes so they al ...

htmlcss

Enhance the appearance of Google Maps by incorporating gradient effects, box shadows, or other similar visual

How can I add a linear gradient to Google Maps? Below is my code snippet. HTML <div id="map"></div> CSS #map{ height:100vh; background: linear-gradient(90deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 18.73%), linear-gradient(180deg, # ...

htmlcssreactjsvue.jsgoogle-maps

Create a webpage in full screen mode with a video player that fills the entire screen

Here is the HTML code I am working with: <div id="container"> <video id="video" src="video.ogv" loop></video> </div> The "container" div and video element occupy the entire screen. #container { po ...

javascriptjqueryhtmlcssvideo

An issue has been detected where the bullet list is uneven due to the CSS property/value columns being set

Is there a more effective way to split a bulleted list into two columns than the method I am currently using and ensure that the columns are aligned at the top? .hand-bullet-list ul{ list-style-type: none; margin-left: 0px; } .hand-bullet-list ...

htmlwordpresscsscss-multicolumn-layout

Unable to display the outside table border in CSS styling

Lately, I've been relying on 'border = 1' in my HTML for styling, but I've come to the realization that using CSS would be more efficient. So, I went ahead and created a simple border class like this... .basicborder table, .basicborder ...

htmlcss