Question

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

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

Answer 2

您可以设置图片的百分比

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

您可以在这里找到http://jsfiddle.net/v92bqvmf/

的演示

Answer 3

您可以为列表指定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
}

Answer 4

此示例使用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

Answer 5

尝试：

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

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

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

Answer 6

像这样：

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

Answer 7

要在不恶化的情况下重新调整图像大小，请执行以下操作

使用定义的尺寸
设置高度或图像本身的宽度为自动，以避免恶化。

＆＃13;

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 */
  }

＆＃13;

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

＆＃13;

如何在CSS中调整图片大小

7 个答案: