如何在 CSS 中调整图片大小答案

【问题标题】：how to resize a picture in CSS如何在 CSS 中调整图片大小
【发布时间】：2015-03-24 09:01:55
【问题描述】：

我正在尝试调整图片大小但不成功。我将如何为项目的 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>

【问题讨论】：

创建一个 div 并将该 div 类链接到调整大小的 CSS 文件。但是先搜索一下你会找到答案的。

标签： html css imgix-js

【解决方案1】：

为元素赋予所有相同的类并使用该 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
}

【讨论】：

【解决方案2】：

尝试：

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

如果您的图片具有不同的尺寸，它们的尺寸将不同，除非你裁剪它们。您还可以按百分比设置宽度。例如三个相邻的图像：

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

【讨论】：

【解决方案3】：

你可以设置图片的百分比

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

你可以在这里找到一个演示 http://jsfiddle.net/v92bqvmf/

【讨论】：

【解决方案4】：

您可以为您的列表赋予 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
}

【讨论】：

【解决方案5】：

像这样：

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

【讨论】：

【解决方案6】：

要重新调整图像大小而不会变质，请执行以下操作

使用定义的尺寸调整 LI
设置高度或将图像本身的宽度设为自动以避免变质。

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>

【讨论】：

【解决方案7】：

此示例使用 imgix 作为图像服务器，您可以通过更改 URL 使用其 API 设置精确的图像裁剪。如果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

【讨论】：