how to resize a picture in CSS

Question

I am trying to resize a picture but have been unsuccessful. How would I write the tag for the CSS of the items. I have tried many different ways and none have worked so far. I want them all to be the same size.

Below is is the HTML for it:

<section>
    <h3 id="portfolio">Portfolio</h3>
    <ul>
        <li> <img src="https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af"></li>
        <li><img src="https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818"></li>
        <li><img src="https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327"></li>
    </ul>
</section>

Create a div and have that div class link to a CSS file with adjusted sizes. But do a search first you will find the answer. — Green, Jan 25 '15 at 21:41

score 1 · Answer 1 · answered Jan 25 '15 at 21:42

Give the elements all the same class and use that css class to resize them:

HTML:

<section>
    <h3 id="portfolio">Portfolio</h3>
    <ul>
        <li> <img class="my-image" src="https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af"></li>
        <li><img class="my-image" src="https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818"></li>
        <li><img class="my-image" src="https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327"></li>
    </ul>
</section>

CSS:

.my-image{
     height: 200px; //change to your preference
     width: 200px; //change to your preference
}

score 1 · Answer 2 · 2016-05-11T18:36:32.733

1

you could set a percentage of the image

li img {
    width:50%;
    height:50%;
}

a demo you can find here http://jsfiddle.net/v92bqvmf/

edited May 11 '16 at 18:36

answered Jan 25 '15 at 21:44

score 1 · Answer 3 · answered Jan 25 '15 at 21:45

You can give ID attribute to your list and then set spesific design to those images.

HTML:
<section>
    <h3 id="portfolio">Portfolio</h3>
    <ul id="myList">
        <li> <img src="https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af"></li>
        <li><img src="https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818"></li>
        <li><img src="https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327"></li>
    </ul>
</section>

CSS:

#myList li img {
width: 200px; // Set width
max-width: 200px; // Or if you want to set only Max width
}

score 1 · Answer 4 · answered Jul 01 '15 at 19:43

This example is using imgix as the image server and you can set the exact crop of images using their API by changing the URL. If the fit mode is set to crop then the height and width must fit the dimensions: fit=crop&w=300&h=200 https://www.imgix.com/docs/reference/size

https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?fit=crop&w=300&h=200

score 0 · Answer 5 · answered Jan 25 '15 at 21:43

try:

img {
  width: 300px;
  height: auto;
}

If your images have different dimensions, they will not have the same size, unless you'll crop them. You could also set the width in percent. For example three images next to each other:

img {
  width: 33%;
  height: auto;
  float: left;
}

score 0 · Answer 6 · answered Jan 25 '15 at 21:46

like this:

<html>
<head>

<style>
.medium_size
  {
    width: 30px;
    height: 30px;
  }
</style>

</head>

<body>
<section>
    <h3 id="portfolio">Portfolio</h3>
    <ul>
        <li><img class="medium_size" src="https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af"></li>
        <li><img class="medium_size" src="https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818"></li>
        <li><img class="medium_size" src="https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327"></li>
    </ul>
</section>
</body>
</html>

Sleek Geek · Answer 7 · 2015-01-25T23:17:23.293

To re-size the image without deterioration, Here's what to do

Size the LI with defined dimensions
Set either the height or the width of the image itself to auto to avoid deterioration.

li { /* refers to the image Container */
  height: 100px; /* Adjust as needed */
  width: 100px;  /* Adjust as needed */
  display: inline-block;
  overflow: hidden; /* Cuts off part of the image that overflows */
  }


li img { /* Refers to the image itself */
  height: 100px;
  width: auto; /* Allows  the image a breathing space */
  }

<section>
    <h3 id="portfolio">Portfolio</h3>
    <ul>
        <li> <img src="https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af"></li>
        <li><img src="https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818"></li>
        <li><img src="https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327"></li>
    </ul>
</section>

how to resize a picture in CSS

7 Answers7