How To Make Two Images Responsive With Fixed Height And Plain CSS?

I want to make the two images responsive with a fixed height similar to here. I created the jsfiddle Somehow the line break is added too soon. I tried to add width=auto however t

Solution 1:

It's not super clear what you're asking but there are a few ways to make images responsive with a fixed height and fluid width.

The easiest of which is to use the object-fit: cover rule. Try adding object-fit: cover to your .image element.

https://www.w3schools.com/css/css3_object-fit.asp

This should force it to fill its container without warping its dimensions.

If you want to build a 2-column grid, you need to set the width of the containers using calc, and remove the margin-right on all the even containers.

.container {
  width: calc(50% - 10px);
  margin-right: 20px;
  float: left;
}

.container:nth-child(2n) {
  margin-right: 0;
}

.image {
  object-fit: cover;
  height: 412px;
}

I modified your js fiddle here: https://jsfiddle.net/hnxz7co9/34/

Solution 2:

Actually When You A image tell display block and height some value then you most declared Width: auto

when you tell an image width some value then tell height auto.

when you break this option your image see stretch, you want one side fee height or width.

body {
    font-family: sans-serif;
    margin: auto;
    max-width: 1280px;
}

.site-content {
    position: relative;
}

.max-column {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.container {
    width: 42%;
    height: 412px;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 20px;
    margin-right: 20px;
    line-height: 0px;
    position: relative;
}

.image {
    opacity: 1;
    display: block;
    height: 412px;
    width: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.container:hover .image {
    -webkit-filter: brightness(70%);
    -moz-filter: brightness(70%);
    -o-filter: brightness(70%);
    -ms-filter: brightness(70%);
    filter: brightness(70%);
    opacity: 1.0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.container:hover .middle {
    opacity: 1;
}

.text {
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

    <div class="site-content max-column">

        <div class="container">
            <img src="https://images.freeimages.com/images/large-previews/10f/autumn-1-1382513.jpg" alt="Avatar" class="image">
            <div class="middle">
                <div class="text">

                    <h1>Works</h1>
                    <p> Is the music</p>
                </div>
            </div>
        </div>
        <div class="container">
            <img src="https://images.freeimages.com/images/large-previews/e01/lrt-interior-1626389.jpg" alt="Avatar" class="image">
            <div class="middle">
                <div class="text">

                    <h1>Works</h1>

                    <p> Is the music</p>
                </div>
            </div>
        </div>
        <div class="container">
            <img src="https://images.freeimages.com/images/large-previews/035/young-golden-retriever-1404848.jpg" alt="Avatar" class="image">
            <div class="middle">
                <div class="text">

                    <h1>Works</h1>

                    <p> Is the music</p>
                </div>
            </div>
        </div>


    </div>

==thanks==

Solution 3:

The reason that your images don't go two to a line is that you haven't allowed enough room for them to do that. You have set your image width at 48%. If you add up all the horizontal margins and horizontal padding outside of your images, you'll find that they add up to more than four percent of the available width, so your second image gets bounced to the next line. I found in your jsfiddle that changing the image width to 47%, or changing your right margin to 10px, or changing your right margin to 1% allowed two images per row.

If you express a width as a percentage and your padding and margins as pixels, you have to calculate the total pixels involved and make sure that there's enough room for two images to fit on a line. To do this, you can use the calc() function as in Daniel Bernardi's answer, or if you want the margins to resize along with your image size, you can set them as percentages rather than hard pixel values.

As for changing to one image per row on smaller screens, I would start by reading about @media. This allows you to set up different CSS rules for screens of different sizes. So, if your screen is below a certain size, set the width of the image to 100% minus padding and margins.

Solution 4:

you have to use background image instead of image

<div class="site-content max-column">
    <div class="container">
        <div class="image img1"></div>
        <div class="middle">
            <div class="text">
                <h1>Works</h1>
                <p> Is the music</p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="image img2"></div>
        <div class="middle">
            <div class="text">
                <h1>Works</h1>
                <p> Is the music</p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="image img3"></div>
        <div class="middle">
            <div class="text">
                <h1>Works</h1>
                <p> Is the music</p>
            </div>
        </div>
    </div>
</div>
body {
    font-family: sans-serif;
    margin: auto;
    max-width: 1280px;
}

.site-content {
    position: relative;
}

.max-column {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.container {
    width: 48%;
    height: 412px;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 20px;
    margin-right: 20px;
    line-height: 0px;
    position: relative;
}

.image {
    opacity: 1;
    display: block;
    height: 412px;
    width: 100%;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.container:hover .image {
    -webkit-filter: brightness(70%);
    -moz-filter: brightness(70%);
    -o-filter: brightness(70%);
    -ms-filter: brightness(70%);
    filter: brightness(70%);
    opacity: 1.0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.container:hover .middle {
    opacity: 1;
}

.text {
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}
.img1{
    background: url('https://images.freeimages.com/images/large-previews/10f/autumn-1-1382513.jpg');
    background-size: cover;
    background-position: center;
}
.img2{
    background: url('https://images.freeimages.com/images/large-previews/e01/lrt-interior-1626389.jpg');
}
.img3{
    background: url('https://images.freeimages.com/images/large-previews/035/young-golden-retriever-1404848.jpg');
    background-size: cover;
    background-position: center;
}

demo