Image Height size doesn't change and only width that change

Question

I know it a bit strange to ask from the title, but I have a problem when changing the size of image inside the carousel. no matter what I did the height of my image doesn't change instead it looks like give an effect like object-fit: cover what I want is to show the image to have size around width: 30vw; and height: 30vh; but every time I change the width its work but when I change the height its not work.

I have some guess such as the container size, the col size, and the div that wrap my image will work if i change their size but in the end its not.

I already read some topic about this :

css-object-fit-contain-is-keeping-original-image-width-in-layout

scaling-centering-and-cropping-image-with-object-fit-and-object-position

but it still not work. Let's say I want to make my image size around width: 360px and height: 360px for example

this is my code:

import React from "react";

// CSS
import './klien.css'

const Klien = () => {

    return (
        <div className="klien">
            <div className="klien-container">
                <p className="section-title">Klien Kita</p>

                <div className="carousel slide" data-ride="carousel">

                    <div className="carousel-item active">
                        <div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size">
                            <div className="mb-3">                    
                                <div className="text-center">
                                    <img className="img-size" src="http://placehold.it/360x360" alt="klien-logo" />
                                </div>              
                            </div>
                        </div>
                    </div>

                    <div className="carousel-item">
                        <div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size ">
                            <div className="mb-3">                    
                                <div className="text-center">
                                    <img className="card-img-top img-size" src="http://placehold.it/360x360" alt="klien-logo" />
                                </div>              
                            </div>
                        </div>
                    </div>

                    <div className="carousel-item">
                        <div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size">
                            <div className="mb-3">                    
                                <div className="text-center">
                                    <img className="card-img-top img-size" src="http://placehold.it/360x360" alt="klien-logo" />
                                </div>              
                            </div>
                        </div>
                    </div>

                    <div className="carousel-item">
                        <div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size">
                            <div className="mb-3">                    
                                <div className="text-center">
                                    <img className="card-img-top img-size" src="http://placehold.it/360x360" alt="klien-logo" />
                                </div>              
                            </div>
                        </div>
                    </div>

                </div> 
            </div>
        </div>
    );        
}

export default Klien;

and this is my css:

.klien{
    background-color: #f6f7fd;
    min-height: 50vh;
}

.klien .klien-container{
    overflow: hidden;
    padding-top: 10vh;
}

.klien .section-title{
    color: #3b73c5;
    font-size: 3em;
    font-weight: 500;
    text-align: center;
}

.klien .carousel-size{
    /* height: 20vh; */
}

.klien .card-center{
    margin: 0% auto;
}

.klien .text-center{
    text-align: center;
}

.klien .card-size{
    max-height: 20vh;
}

.klien .img-container{
    height: 20vh;
    width: 20vh;
}

.klien .img-size{
    width: 30vw;
    height: 30vh;
    /* object-fit: contain; */
}

can someone help and give explanation about my problem? in first I thought maybe it is because of object-fit: contain but it seems my guess about it is wrong

this is the screenshot:

Do you want the images fit the desired size? Images can be stretched? — joseluismurillorios, Aug 03 '19 at 00:31
@joseluismurillorios yes at least I want to do that, but whenever I try to change the size it seems the `height` property lock onto something so only `width` that i can change, but if i do that it will make the image give the effect like `object-fit: cover` — Rakis Friski, Aug 03 '19 at 00:42
I have answered some idea, if you have more details about what you want I can help. — joseluismurillorios, Aug 03 '19 at 01:14

score 1 · Accepted Answer · answered Aug 03 '19 at 01:12

1

I would recommend to use a div with a background image, that way you have control of the responsiveness of your list. It requires almost nothing to perform that change.

You need to change your img tags to div

<div
  className="img-size"
  style={{ backgroundImage: `url(${"http://placehold.it/360x360"})`}}
/>

Your css

.klien .img-size{
    width: 30vw;
    height: 30vh;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    /* object-fit: contain; */
}

I made a codepen with this. Hope it helps, if you want another approach you can tell me.

answered Aug 03 '19 at 01:12

joseluismurillorios

1,005
6
11

Thank you ^.^, its work like a charm, I seriously miss this kind of approached, it certainly work if I just make it into a background-image, but do you know why the first approach doesn't work? I'm quite curious about it characteristic, and can this approach work if I try to using API to read an Image ? – Rakis Friski Aug 03 '19 at 01:22
I don't know exactly why, but I think is related to the fact that the browser doesn't know where to display an img tag (position, size) as img tag doesn't have the same properties as a background. You let me thinking about it! – joseluismurillorios Aug 03 '19 at 21:37

score -1 · Answer 2 · answered Aug 03 '19 at 00:15

-1

Have you tried to change the image size using inline css? For example<img src="url" width="specified with in px or %">

answered Aug 03 '19 at 00:15

Born to code

87
8

thank you for your answer, I already try the inline method and it still give the same result where the `height` property doesn't change size – Rakis Friski Aug 03 '19 at 00:43
Try edit in this format – Born to code Aug 03 '19 at 00:57
when I try this code I got some error that said `Image` and `Transformation` is not defined, is it `Image` and `Transformation` a custom module or is it from react module? – Rakis Friski Aug 03 '19 at 01:12
Did you check the case sensitivity? And alternatively, change to .....You can change the extension to your file extension – Born to code Aug 03 '19 at 01:19
yes I already try it but it still not work, but fortunately @joseluismurillorios approach work for my problem, and thank you for your answer ^.^ – Rakis Friski Aug 03 '19 at 01:25

Image Height size doesn't change and only width that change

2 Answers2