-1

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

7 回答 7

1

你可以设置图像的百分比

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

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

于 2015-01-25T21:44:43.223 回答
1

您可以为您的列表提供 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
}
于 2015-01-25T21:45:04.430 回答
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
}
于 2015-01-25T21:42:40.000 回答
1

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

于 2015-07-01T19:43:05.277 回答
0

像这样：

<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>
于 2015-01-25T21:46:31.300 回答
0

尝试：

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

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

img {
  width: 33%;
  height: auto;
  float: left;
}
于 2015-01-25T21:43:00.967 回答
0

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

  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>

于 2015-01-25T23:11:24.623 回答