how to resize a picture in CSS

Question

how to resize a picture in CSS

638 views Asked by Nel At 13 September 2024 at 22:13

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>

Original Q&A

There are 7 answers

**Kevin Pei** · Answer 1 · 2015-01-25 21:42:40

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
}

**The F** · Answer 2 · 2015-01-25 21:43:00

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;
}

**AudioBubble** · Answer 3 · 2015-01-25 21:44:43

you could set a percentage of the image

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

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

**Sir Crow** · Answer 4 · 2015-01-25 21:45:04

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
}

**Sleek Geek** · Answer 5 · 2015-01-25 23:11:24

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>

**Miloslav Číž** · Answer 6 · 2015-01-25 21:46:31

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>

**Dylan Valade** · Answer 7 · 2015-07-01 19:43:05

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

TechQA.

how to resize a picture in CSS

There are 7 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in IMGIX-JS

Popular Questions

Popular Tags

Trending Questions