CODEWITHSUNDEEP
htmlcssresponsive-design
Matheus Cirillo
Matheus Cirillo

Reputation: 133

Image resize with CSS

I have a question about the image resizing in CSS.

I have a 1920x1080 image.

This image should be automatically resized to fit on any screen, however I am unable to do this.

Example of what I want here

At the top, a video start to play, that's how I want you to be my page, but instead of a video, the picture.

My HTML:

<body>
<div id="slides">
<ul>
    <li><img src="_img/img1.jpg"></li>
    <li><img src="_img/img2.jpg"></li>
    <li><img src="_img/img3.jpg"></li>
    <li><img src="_img/img4.jpg"></li>
</ul>
</div>

All the images inside the div called slides should fit in any screen.

Upvotes: 5

Views: 1544

Answers (4)

bnahin
bnahin

Reputation: 816

Try setting the <img> to have a width property of 100%, which would limit the image width to the window's width.

<li><img src="_img/img1.jpg" width="100%"></li>

Fiddle Demo

CSS

li > img {
width:100%;
}

To optimize for mobile users, you can also set the viewport as the device width, like so:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Upvotes: 2

shaithana
shaithana

Reputation: 2490

I suggest you to use a background for li instead the img in this way:

<body>
<div id="slides">
<ul>
    <li id="img1"></li>
    <li id="img2"></li>
    <li id="img3"></li>
    <li id="img4"></li>
</ul>
</div>

then you just set the global background property (CSS):

#slides li {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

and set the single background images individually (CSS)

#img1 {
    background: url(the_url_1.jpg);
}
#img2 {
    background: url(the_url_2.jpg);
}

the background-size property do the magic:

  • if you set it as cover you scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area;

  • if you set it as contain you scale the image to the largest size such that both its width and its height can fit inside the content area;

Upvotes: 2

dippas
dippas

Reputation: 60573

First of all you should insert meta viewport on your head, like this

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

then here is a snippet of how you could make this work.

body {
  margin: 0;
  padding: 0
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0
}
#slides img {
  max-width: 100%;
  display: block /*fix inline image small gap*/
}

/*larger devices than the size of image */
@media (min-width: 1920px) {
  #slides img {
    width: 100%
  }
}
<div id="slides">
  <ul>
    <li>
      <img src="http://lorempixel.com/1920/1080">
    </li>
    <li>
      <img src="http://lorempixel.com/1920/1080">
    </li>
    <li>
      <img src="http://lorempixel.com/1920/1080">
    </li>
    <li>
      <img src="http://lorempixel.com/1920/1080">
    </li>
  </ul>
</div>

Upvotes: 2

Jabel M&#225;rquez
Jabel M&#225;rquez

Reputation: 762

You should add to your CSS:

#slides img {
   width: 100%;
   height: auto;
}

This make the images fit the width of the container and keeping the aspect ratio.

Upvotes: 2

Related Questions