当前位置: 首页 > 面试题库 >

CSS图像调整大小问题

章宏恺
2023-03-14
问题内容

调整在管理面板中设置的图像大小时出现问题。

.users-list>li img {
    border-radius: 50%;
    max-width: 100%;
    height: auto;
    width: 100px;
    height: 100px;
}

然后我尝试删除height: 100px似乎可以解决问题的属性,但是由于某种原因关闭了一张图像


问题答案:

如果您不希望图像拉伸,则应固定一个尺寸,而将另一个尺寸设为auto。(这将保留图像的长宽比)

请参阅下面的示例,其中width在height自动调整时保持不变:

img {

  display: block;

}

.correct,

.incorrect {

  border: 1px solid red;

  display: inline-block;

}

.incorrect img {

  max-width: 100%;

  width: 100px;

  height: 100px;

}

.correct img {

  max-width: 100%;

  width: 200px;

  height: auto;

}


<div>This one stretches out:</div>

<div class="incorrect">

  <img src="http://placehold.it/150x50" />

</div>



<div>This will preserve aspect ratio and look right:</div>

<div class="correct">

  <img src="http://placehold.it/150x50" />

</div>

请参阅下面的示例,其中height在width自动调整时保持不变:

img {

  display: block;

}

.correct,

.incorrect {

  border: 1px solid red;

  display: inline-block;

}

.incorrect img {

  max-height: 100%;

  height: 100px;

  width: 100px;

}

.correct img {

  max-height: 100%;

  height: 200px;

  width: auto;

}


<div>This one stretches out:</div>

<div class="incorrect">

  <img src="http://placehold.it/150x50" />

</div>



<div>This will preserve aspect ratio and look right:</div>

<div class="correct">

  <img src="http://placehold.it/150x50" />

</div>


 类似资料:
  • 问题内容: 我在这里使用Go调整大小包:https://github.com/nfnt/resize 我正在从S3中提取图像,如下所示: // this gives me data []byte 之后,我需要调整图像大小: // problem is that the original_image has to be of type image.Image 将图像上传到我的S3存储桶 // pro

  • 问题内容: 我要在pdf文件中添加一个水印。水印是.bmp图像,并且是2290 x3026。尝试调整此图片的大小以适合页面时,我遇到很多麻烦,有人有什么建议吗? 这是方法的输出。 我会与你们共享pdf图片,但不幸的是我不能。 我应该尝试改用.jpg吗?我真的不知道iText如何处理不同的图像扩展名。 问题答案: 您可以使用另一种方法:“手动”调整图像大小(即通过图像处理软件),而不是通过iText

  • 我有一个水印,我想放在我的pdf中。水印是一个。bmp图像,为2290 x 3026。我在调整图片大小以适应页面时遇到了很多问题,有人有什么建议吗? 下面是方法的输出。 我想和你们分享pdf的图片,但不幸的是我不能。 我是否应该尝试使用。改为jpg?我真的不知道iText处理不同图像扩展的效果如何。

  • 问题内容: 我正在尝试调整缓冲图像的大小。我能够存储它并显示在jframe上没有问题,但是我似乎无法调整它的大小。关于如何更改它以使其正常运行并将图像显示为200 * 200文件的任何提示都很好 问题答案: 更新的答案 我不知道为什么我的原始答案有效,但是在单独的环境中对其进行了测试,我同意,原始的可接受答案不起作用(为什么我说过,我也不记得了)。另一方面,这确实起作用:

  • 问题内容: 我想拍摄一张图像并更改图像的比例,虽然它是一个numpy数组。 例如,我有一个可口可乐瓶的图像: bottle-1 转换为一个numpy的形状数组,我想调整其大小以表示第二个图像的大小: bottle-2 形状为。 如何在保持原始图像的同时将图像尺寸更改为特定形状?其他答案建议每隔一行或第三行剥离,但是我想要做的基本上是像通过图像编辑器(但在python代码中)那样收缩图像。是否有任何

  • 问题内容: 我是Django(和Python)的新手,在尝试使用其他人的应用程序之前,我一直在尝试自己做一些事情。我在理解事物在Django(或Python)的执行方式中“适合”何处时遇到了麻烦。我要解决的问题是上传图片后如何调整图片大小。我已经很好地设置了模型并插入了admin,并且图像可以很好地上传到目录: 我现在遇到的麻烦是获取该文件并将新文件制作为缩略图。就像我说的那样,我想知道如何在不使