Achieving the perfect balance: Centering and fitting an image into a div without any loss

Question

Achieving the perfect balance: Centering and fitting an image into a div without any loss

As I delve into learning CSS, I keep stumbling upon solutions that are almost there for what should be a simple task. Being at a very basic stage of my learning journey, I am struggling with figuring things out.

My current challenge involves placing one image on a page in a horizontal and vertical center alignment. The image should be contained within a div that occupies 80% of the window height and width. Additionally, I want the image to automatically stretch to fill either the height or width of the div, depending on which dimension is smaller.

While this may seem straightforward to many, it is quite puzzling for me as a beginner. Any guidance on how to achieve this would be greatly appreciated.

To better illustrate my point, I have created an example:

css html centering stretching

Answer 1

Answer №1

For a solution to your query, view this example

This method accomplishes most of your requirements. To adjust the image height to 80% of the available space when the screen height is less than the intrinsic image height, you may need to incorporate additional JavaScript.

<body>
<div id="container">
        <img src="http://dummyimage.com/600x400/000/fff.jpg" alt="appropriate alt text">
</div>
</body>

html,
body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background-color: #eee;
}
#container{
    margin: auto;
    width:100%;
    height:100%;
    text-align:center;
    font-size:0;
    white-space:nowrap;
    background:#aae;
}
#container:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
img {
    width:80%;
    height:auto;
    display:inline-block;
    vertical-align:middle;
    background:#fff;
}

Answer 2

For a solution to your query, view this example

This method accomplishes most of your requirements. To adjust the image height to 80% of the available space when the screen height is less than the intrinsic image height, you may need to incorporate additional JavaScript.

<body>
<div id="container">
        <img src="http://dummyimage.com/600x400/000/fff.jpg" alt="appropriate alt text">
</div>
</body>

html,
body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background-color: #eee;
}
#container{
    margin: auto;
    width:100%;
    height:100%;
    text-align:center;
    font-size:0;
    white-space:nowrap;
    background:#aae;
}
#container:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
img {
    width:80%;
    height:auto;
    display:inline-block;
    vertical-align:middle;
    background:#fff;
}

Achieving the perfect balance: Centering and fitting an image into a div without any loss

Answer №1

Similar questions

Sharing a document that contains a linked image file using a relative path through the `publish` feature

Executing cssnano Using the Command Prompt

Customizing colors in React Material UI

Trouble getting custom CSS media queries to function properly alongside Bootstrap 3

Struggling to incorporate a three-strike mechanism into my JavaScript game

How can we use the nth-of-type selector to target a set of eight elements in a

angularjs: container holding directive is currently not visible, with a height and width of 0 pixels

The challenge of styling React components

Is it possible to run a Universal Windows Platform desktop app on an Android mobile device?

Leveraging the power of CSS id selectors to customize the appearance of a Grid

Using @at-root seems to be causing an error when combining the "a" selector with

Conceal a div containing a specific class during the page's loading process, then reveal it once the

retrieve data with the help of DOMDocument

Preventing Background Scrolling While Modal is Open in React - Using 'position: fixed' causes the page to unexpectedly scroll back to the top

By default, Nuxt 2.15.7 is automatically installed when you create a new Nuxt app

Creating a webpage header with Javascript to mimic an existing design

Gallery of Disappearing Images

A guide to using jQuery to execute mathematical operations from a string

Steps for accessing registration form data once the signup button has been clicked

Changing datetime-local format from European to American dates