What is the best way to resize an image within a dynamic-sized div?

Is there a way to resize an image that is set by percentage in a dynamically sized div? Currently, I am facing an issue where the layout looks perfect without the image, but breaks when the image is added. I want all units to be consistent and find a solution to fit the photo into the div without disrupting the entire layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body{
            width: 100%;
            height: 100vh;
        }

        /* == WHOLE PAGE ==*/
        .landing{
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column; 
        }

        /* HEADER */
        .header{
            background: #F582A7;
            flex: 0 1 10%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header > ul{
            display: flex;
            flex-direction: row;
            list-style: none;
        }

        .header > ul > li{
            padding: 0 10px 0 10px;
        }

        /* CONTENT */
        .mainContent{
            background: #F10086;
            flex: 1 1 auto;
            display: flex;
            flex-flow: column-reverse;
        }

        .bottomContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .topContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
        }

        .topContent > img{
            max-height: 100%;
            max-width: 100%;
        }

        /* TABS */
        .tabs{
            background: #711A75;
            flex: 0 1 18%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .tab{
            height: 80%;
            width: 30%;
            background: #180A0A;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div class="landing">
        <div class="header">
            <ul>
                <li>Test 0</li>
                <li>Test 0</li>
                <li>Test 0</li>
            </ul>
        </div>
        <div class="mainContent">
            <div class="bottomContent">
                <h1>Lorem, ipsum dolor.</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
            </div>
            <div class="topContent">
                <!--<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png" alt="circle">-->
            </div>
        </div>
        <div class="tabs">
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
        </div>
    </div>
</body>
</html>

htmlcssweb

Answer №1

To make an image cover the entire width of the page, you can utilize object-fit, specifying the image height in arbitrary units like em as shown in this example.

Another solution achieves the same effect without using object-fit, instead opting to use the image as a background. This approach is useful for images that are purely decorative and do not require alternative text like alt.

Both methods can be implemented in a similar manner.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body{
            width: 100%;
            height: 100vh;
        }

        /* == FULL PAGE ==*/
        .landing{
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column; 
        }

        /* HEADER */
        .header{
            background: #F582A7;
            flex: 0 1 10%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header > ul{
            display: flex;
            flex-direction: row;
            list-style: none;
        }

        .header > ul > li{
            padding: 0 10px 0 10px;
        }

        /* CONTENT */
        .mainContent{
            background: #F10086;
            flex: 1 1 auto;
            display: flex;
            flex-flow: column-reverse;
        }

        .bottomContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .topContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
        }

        .topContent > img{
            max-height: 100%;
            max-width: 100%;
        }

        /* TABS */
        .tabs{
            background: #711A75;
            flex: 0 1 18%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .tab{
            height: 80%;
            width: 30%;
            background: #180A0A;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div class="landing">
        <div class="header">
            <ul>
                <li>Test 0</li>
                <li>Test 0</li>
                <li>Test 0</li>
            </ul>
        </div>
        <div class="mainContent">
            <div class="bottomContent">
                <h1>Lorem ipsum dolor.</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
            </div>
            <div class="topContent">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png" alt="circle" style="object-fit: cover; height: 10em; width: 100%">
            </div>
        </div>
        <div class="tabs">
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
        </div>
    </div>
</body>
</html>

Answer №2

If you prefer not to use an image tag, consider adding the image as a background using CSS instead. By doing so, you have the flexibility to adjust the background-size property to values like contain or cover.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body{
            width: 100%;
            height: 100vh;
        }

        /* == WHOLE PAGE ==*/
        .landing{
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column; 
        }

        /* HEADER */
        .header{
            background: #F582A7;
            flex: 0 1 10%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header > ul{
            display: flex;
            flex-direction: row;
            list-style: none;
        }

        .header > ul > li{
            padding: 0 10px 0 10px;
        }

        /* CONTENT */
        .mainContent{
            background: #F10086;
            flex: 1 1 auto;
            display: flex;
            flex-flow: column-reverse;
        }

        .bottomContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .topContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
            background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png');
            background-repeat: no-repeat;
            background-size: contain;
        }

        .topContent > img{
            max-height: 100%;
            max-width: 100%;
        }

        /* TABS */
        .tabs{
            background: #711A75;
            flex: 0 1 18%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .tab{
            height: 80%;
            width: 30%;
            background: #180A0A;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div class="landing">
        <div class="header">
            <ul>
                <li>Test 0</li>
                <li>Test 0</li>
                <li>Test 0</li>
            </ul>
        </div>
        <div class="mainContent">
            <div class="bottomContent">
                <h1>Lorem, ipsum dolor.</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
            </div>
            <div class="topContent">
            </div>
        </div>
        <div class="tabs">
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
        </div>
    </div>
</body>
</html>

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

Arrays store values by reference, so when comparing their pointers, they should point to the same values in order to evaluate as true

In my understanding, arrays and objects act as pointers, pointing to a specific memory location. In the given example, when var a is updated, b should also be updated since it points to the same memory location as a. The expected final result would be tru ...

javascripthtmlarrays

SVG with embedded fonts failing to display properly in web browsers

Within this SVG, there are two different font types being used: SymbolMT for the mathematical expressions and Hind-Light for the text. Both fonts have been defined within the @font-face section of the SVG. The font used for the math expressions appears a ...

csssvgfonts

Drop-down menu in a table cell overflowing with lengthy text, causing the table to collapse

I'm facing an issue with my table where I have inputs and selects inside <td>. The problem arises when the text in the options of the <select> element is too long, causing the <td> to expand and disrupt the overall layout of the tabl ...

htmlangularjscsssass

Align buttons in the center of a card or container using HTML and CSS

Hi everyone, this is my first time posting so please go easy on me. I've been struggling to align the buttons at the bottom of my cards to make them look neater. I've tried using flexbox but it doesn't seem to be working. Some people have su ...

htmlcssbuttonflexbox

"Creating the Perfect Parallax Effect: A Step-by-Step

Seeking to implement a responsive parallax effect on my website, I have the following structure: <section id="first"> <div class="text fixed" > <h1><b>aSs</b> lorem ipsum dolor sit amet</h1> <p> ...

javascriptjquerycsshtmlparallax

Import files from local directory to iframe in Electron application

I am currently working on an application using Electron that allows users to preview HTML5 banner ads stored locally on their computer. At this point, I have enabled the ability to choose a folder containing all the necessary files. Once a directory is s ...

javascripthtmlnode.jselectron

What is the best way to position a container filled with items, such as products on an e-commerce site, next to a vertical navigation bar?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>grid</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12 ...

htmlcssbootstrap-4grid

HTML and SCSS: The slideout menu does not impact the content block until reaching a specific threshold

Note: Please note that this issue is specific to the desktop version with a minimum width of 64em. Codepen demo: Check it out here The Challenge Ahead The goal here is to ensure that the purple side menu does not impact the position or width of the ma ...

htmlcsslayoutsassresponsive

The Markup() function in Flask is used to generate markup content that is not enclosed within

Before I explain my issue, let me go ahead and share the code with you. Using Jinja in HTML <p>{{ item }}</p> 'Flask' item = Markup('<ul><li>list item 1</li><li>list item 2</li></ul>') ...

pythonhtmlflaskmarkupjinja2

Exploring the Functionality of worker-loader Inline

It was my understanding that the Webpack worker-loader configuration below: ... module: { rules: [ { test: /worker\.js/, loader: "worker-loader", options: { inline: 'fallba ...

javascriptwebwebpackworkerworker-loader

Aligning elements in the Bootstrap 3 Grid

Hey there, fellow brainiacs! I'm in need of some assistance with aligning my bootstrap grid. The issue I'm facing is that it doesn't stack properly when in responsive mode. I would really appreciate some guidance on how to make it fold and ...

csstwitter-bootstrapgridviewbootstrap-4responsive

Tips for positioning a highcharts pie chart and legend in the middle of a page

I'm struggling to center my highchart data in a node/react single page application. Currently, it appears off-center like this: https://i.stack.imgur.com/ccR6N.png The chart is floating to the left and I would like to have everything centered within ...

javascripthtmlcsshighcharts

JavaScript document string separation

Hi there, I'm a newbie here and could really use some assistance. I am struggling with creating a function and would appreciate any ideas... To give you an idea of what I need help with, I have a String and I want to check if it contains a specific w ...

javascripthtmlstring

What is the best technique for vertically aligning text within two divs placed side by side?

Thank you for taking the time to read this. I have a piece of code similar to the one below. While using line-height works when there is only one line of text, it becomes problematic when the comments section contains multiple lines. I am wondering what w ...

htmlcss

Utilizing XPath with Selenium in VBA

In my search for a node based on text located within a child or grandchild node of its immediate sibling, I came across the following HTML structure: <div> <div class="searchedDivClass" id="DynamicId1"> </div> <div class=" ...

htmlvbaseleniumxpath

Ways to create a horizontal navigation menu using jQuery UI

Hey there, I'm really enjoying all the jQuery UI features! I have a question about the navigation menu - for some reason, I can't seem to get it to display horizontally. I've been playing around with the CSS but I must be missing something ...

cssjquery-uimenu

What could be causing my background image to vanish or flicker in Bootstrap?

Something unusual is happening with my website. There's a section with a static background image, and as you scroll, a quote and button (which will eventually link to a store) appear on top of it. Previously, this setup was working fine. However, yest ...

htmlcssbootstrap-4

Ways to align a particular flex item horizontally while keeping the others centered using CSS

Take a look at this CSS Code Screenshot with an example. In my setup, I have a container styled with the following CSS properties: .container { display: flex; justify-content: center; align-items: center; } .item-3 { align-self: flex-end; } By us ...

cssflexbox

Tips on configuring the path to incorporate Bootstrap CSS, JavaScript, and font files/classes into HTML when the HTML file and Bootstrap files are located in different directories

<!DOCTYPE html> <html> <head> <title>Unique Demo</title> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div class="container"> <form ...

htmlbootstrap-4

jquery: centralizing progressbar growth on the page

Working with Bootstrap progress bars is a regular task for me, and I have included a small example below. var $progress = $('.progress'); var $progressBar = $('.progress-bar'); var $alert = $('.alert'); setTimeout(function() ...

jquerycss