CSS - vertical responsive image

Question

I have the folowing slider:

But i have a problem with resizing it.

Right now its 1200 x 400, and when I resize the page the image width will resize fine. The problem is that the height stays 400px, but I want that the height also resizes relative to the width of the image when you view it on a smaller device.

How do I do that?

This is what you see on a phone:

The css for the image right now is:

max-width: 100%;
height: auto;

What I have tried is:

Set the height to 33.3% (width html, body and #container set to width: 100%)
I tried differend settings with vh and vm but did not work as I wanted it to

Btw:

I am using Bootstrap 4, so if there is a class in Bootstrap that can solve this would be perfect.

I also have a live version on https://jalinen.luukwuijster.io

Please give us more code, html and css for that part of page, so all css for container and for image, and also html that holds that image? — Nikola Kokotec, Mar 04 '17 at 19:06
There is not really not more code that you need to know. The image is in a `
` and the div has a `100% height` — Luuk Wuijster, Mar 04 '17 at 19:18
however, I do have a live version on: https://jalinen.luukwuijster.io — Luuk Wuijster, Mar 04 '17 at 19:20
try looking here- http://stackoverflow.com/questions/3751565/css-100-width-or-height-while-keeping-aspect-ratio — Shtut, Mar 04 '17 at 19:24
@LuukWuijster you can add `snippet` here, or a `fiddle` link, just edit your question and add your `code` in `snippet` that would help others to help you solve this matter — Hassan Zia, Mar 04 '17 at 19:26
What pixel is the mobile device you are using ? It's working fine for me — , Mar 04 '17 at 19:28
@L.S will you define **fine** here? his code is producing exactly same output as displayed in pic — Hassan Zia, Mar 04 '17 at 19:29

score 1 · Accepted Answer · answered Mar 04 '17 at 19:34

This did the job. Setting this elements to display block.

carousel-item-next, .carousel-item-prev, .carousel-item.active {
  //display: -webkit-box;
  //display: -webkit-flex;
  //display: -ms-flexbox;
  //display: flex; 

  display: block;

}

However, you will get a small slider on a smaller screen. What I would do is to set the imagse as background-image, then set the background-size to cover. This way the image will be scaled down/up from the center(or you can change from wherever you want). Then I would set media queries for the height of the slider. This way you have more control over the slider.

Hmmmmm, yes. This seems to have solved my problem. Thanks! – Luuk Wuijster Mar 04 '17 at 19:42 — Luuk Wuijster, Mar 04 '17 at 19:42

score 0 · Answer 2 · answered Mar 04 '17 at 19:27

0

Quick fix, just override your bootstrap and set height according to your screen size.

@media screen and (min-width: 480px) {
#yourDiv {
    height: 200px; //or 50%;
}    

@media screen and (min-width: 1024px) {
#yourDiv {
    height: 400px; //or 100%;
}

answered Mar 04 '17 at 19:27

Pratyush Pranjal

544
6
26

Yes ofcourse, i am familiar with the media queries, But I would just like it to be dynamic. Because If you look at it on a ipad it will still be 400px – Luuk Wuijster Mar 04 '17 at 19:31

CSS - vertical responsive image

2 Answers2