Как изменить размер картинки в CSS

Я пытаюсь изменить размер изображения, но безуспешно. Как бы я написал тег для CSS элементов. Я пробовал много разных способов, и ни один из них не работал до сих пор. Я хочу, чтобы все они были одинакового размера.

Ниже приведен HTML-код для этого:

<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>
Источник

7 ответов

Присвойте элементам одинаковый класс и используйте этот класс CSS для изменения их размера:

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
}
Источник

В этом примере используется imgix в качестве сервера изображений, и вы можете установить точную обрезку изображений, используя их API, изменив URL. Если fit режим установлен на crop тогда высота и ширина должны соответствовать размерам: 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

Источник

Вы могли бы установить процент изображения

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

демо вы можете найти здесь http://jsfiddle.net/v92bqvmf/

Источник

Вы можете присвоить свой идентификатор атрибуту ID, а затем установить специальный дизайн для этих изображений.

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
}
Источник

Как это:

<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>
Источник

Пытаться:

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

Если ваши изображения имеют разные размеры, они не будут иметь одинаковый размер, если вы не обрежете их. Вы также можете установить ширину в процентах. Например три изображения рядом друг с другом:

img {
  width: 33%;
  height: auto;
  float: left;
}
Источник

Чтобы изменить размер изображения без ухудшения, вот что нужно сделать

  1. Размер LI с определенными размерами
  2. Установите либо высоту, либо ширину самого изображения на автоматический, чтобы избежать ухудшения. 

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>

Источник
Другие вопросы по тегам