文章/答案/技术大牛

发布

cssimg多了几像素

CSS 图片多了几像素问题

基础概念

CSS 中的 img 标签用于嵌入图片。有时候，开发者会发现图片显示时比预期多了几像素，这通常是由于 CSS 样式或浏览器默认样式引起的。

类型

内联图片：直接在 HTML 中使用 img 标签。
背景图片：通过 CSS 的 background-image 属性设置。

应用场景

网页布局中的图片展示。
图标、按钮等 UI 元素的设计。

问题原因

行高（line-height）：默认情况下，行高可能会影响图片的垂直对齐。
边框（border）：如果图片有边框，边框的宽度也会增加图片的总尺寸。
内边距（padding）：图片容器的内边距也会增加图片的显示尺寸。
垂直对齐（vertical-align）：默认情况下，图片的垂直对齐方式可能会导致图片显示偏移。

解决方法

设置 vertical-align 属性：
设置 vertical-align 属性：
移除内边距和外边距：
移除内边距和外边距：
设置边框宽度：
设置边框宽度：
调整行高：
调整行高：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 图片问题</title>
    <style>
        img {
            vertical-align: middle;
            padding: 0;
            margin: 0;
            border: none;
        }
        .container {
            line-height: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="example.jpg" alt="Example Image">
    </div>
</body>
</html>

参考链接

通过以上方法，可以有效解决 CSS 图片多了几像素的问题。

页面内容是否对你有帮助？

有帮助

没帮助

我想要一个div大小的40 of x 40 of的屏幕，并且独立于缩放？

、、、、

所以我需要在屏幕上显示一些尺寸为40 to 40 to的东西。无论哪种智能手机、屏幕和缩放级别。这怎麽可能？我用HTML5，CSS，Javascript和Jquery编写代码。换句话说，如果我在div上用现实生活中的尺子进行测量，它应该始终是40 x 40。

浏览 0提问于2015-04-17得票数 1

1回答

如何在不移动按钮的情况下将XtraForm标题文本设置在中间？

、、

我尝试过中的示例，但是它会导致窗口按钮根据焦点移动几个像素。当我点击窗口标题栏窗口按钮到一个位置，当我移动鼠标在按钮上，他们移动到其他位置几像素外。

浏览 6提问于2014-10-06得票数 2

回答已采纳

7回答

如何设置ASP.NET项目以查找文件？

例如/cssimg/error.png。我的项目在我的/public文件夹中找不到资源，我也不知道如何让它找到它们。我怎样才能把我的项目设置成这样呢？

浏览 7提问于2010-01-05得票数 3

回答已采纳

1回答

.width()返回的像素多了4个

、

我有一个div：使用样式： position: absolute; height: 280px; padding: 0; border: 0;#layer1 { background-color: red; color: #fff; }$(".frame&#

浏览 2提问于2012-06-18得票数 2

回答已采纳

8回答

快速地将一大块内存倒过来

、、

这可以通过将屏幕旋转180度来修复，但随后我需要反转屏幕数据(由库生成)，从屏幕的左上角开始，其大小为1位=1像素。CPU不是很强大，而且设备已经有足够的工作，再加上每秒几帧是可取的，所以性能是一个问题；RAM就没有那么多了。编辑:单核，ARM 9系列。64MB，(稍后将缩减到32MB )，Linux。

浏览 2提问于2010-01-28得票数 13

回答已采纳

1回答

改进背景减法

、、

我正在从事视频处理项目，以检测前面的地面物体。下面是我用来分离前景和背景的代码的一部分。#include "opencv2/video/background_segm.hpp"#include <stdio.h> using namespace cv; //this is a sample for foreground detection f

浏览 2提问于2013-03-02得票数 0

2回答

放慢播放MovieClip的速度

、

我当前的代码播放影片剪辑，然后突然停止并向前移动几帧。看起来比我想要的粗糙多了。

浏览 2提问于2011-08-04得票数 1

回答已采纳

1回答

是否可以将PictureBox (Vb.net Visual )移动小于像素

、

我有一艘小艇，当然，如果它以一个定时器(16毫秒(60 its ))的速度以1像素的速度移动，并且它的正向向上，它的Y轴运动仅为1像素/刻度，X轴为0……但是，如果它顺时针旋转5度，它的Y轴运动需要是(1/18 * 17)，X轴需要(1/18).这就意味着飞船应该以每条船0.95像素的速度向上移动，而每条船的移动速度应该是0.05像素，这显然是不可能的，因为你的像素不能少于1像素。

浏览 1提问于2021-05-15得票数 0

回答已采纳

2回答

控件和标准控件大小之间的标准边距

、、、

例如，Windows窗体设计器提供了在窗体上放置控件的方法，窗体边框和控件边框之间有12个像素。这对我来说似乎太多了。它是标准值吗？另外，据我所知，标准的按钮高度应该是23像素。我说的对吗？我能否在Visual Studio中设置此默认值(例如，当快照显示时，如果希望控件和窗体边框之间的默认边距为6像素而不是12像素，该怎么办？)

浏览 0提问于2009-06-27得票数 4

回答已采纳

2回答

鼠标拖动问题

我遇到了一个问题，当我用鼠标在java中使用鼠标拖动事件拖动时，我可以获得所有像素的坐标值，但当我快速拖动时，我只能获得像素坐标值的三分之一，例如，如果我缓慢拖动，我将获得760个像素值，但当我快速拖动时，我只能获得60个像素坐标值，请帮助我我将使用像素值来比较符号

浏览 3提问于2011-02-15得票数 2

1回答

scrollTop获取每个像素

、、

当我使用函数scrollTop来获取顶部的像素量时，我会得到1，4，20，...这取决于我滚动的速度。function(){ console.log(position);我正在建设一个网站，我需要得到每个像素现在我正在使用下面的代码，它可以计算每个像素，但这只在网站不高的情况下才能顺利工作。如果站点的高度超过3000px，它将开始抖动，因为它需要使用lang来计算像素。

浏览 2提问于2014-10-01得票数 0

1回答

在jQuery中为长时间内的短距离设置位置动画

、

动画工作，它只是不平滑，它看起来跳跃的每一次云层移动，即使是每几毫秒的单个像素。我假设亚像素移动是不可能的，我只是希望我是错的。

浏览 0提问于2011-01-28得票数 1

回答已采纳

2回答

无法向位于按钮上方的图标添加上边距

它太高了几像素，但我想不出怎么调整它。边距和填充也移动按钮，这样它就不会改变任何东西。玩垂直对齐改变它，但它仍然有一些像素外，我想要一个像素完美的位置。如何降低/提高图标？

浏览 4提问于2017-02-06得票数 1

回答已采纳

1回答

Apache Drill Mongo DB简单查询花费的时间太长

、

当我尝试使用任何其他mongo连接器连接并运行相同的查询时，它只需要几毫秒。我也看到人们在网上谈论他们的mongo查询花了2秒钟。我可以忍受2秒，但20秒太多了。

浏览 0提问于2018-07-09得票数 1

2回答

在图像中定位模板

*编辑：*我有一个构成图像边缘的黑色像素列表，以及另一个构成模板的像素列表。我只是在寻找一种简单的方法来找到模板图像像素列表中最好的(x，y)偏移量，这样它们就能尽可能接近形成图像的像素。一些宽容是很好的，允许几%的比例或几度的旋转，但没有激进的。

浏览 0提问于2011-03-11得票数 3

回答已采纳

1回答

如何在Chrome中获得mozInnerScreenY？

、

如何在Chrome中获取文档体左上角像素的坐标？在火狐中，可以使用window.mozInnerScreenY + window.window.mozInnerScreenX，但在Chrome中就没有那么多了。

浏览 7提问于2022-05-10得票数 0

回答已采纳

1回答

我应该使用什么窗口“性能监视器”设置来调试抛出InvalidBitmap错误的Flash电影？

、、、

今天早上，一切似乎都很好，所以我决定推送它，并尝试上传20张5616x3744像素和5.32MB的图片(与我之前尝试的图片相同)。

浏览 0提问于2009-06-19得票数 0

1回答

jQuery平滑滚动段以不同的速度工作

、、、

我得到了以下非常流行的代码： $(".scroll").click(function(event){ $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);});<a href="#scrollThere">Click</a><

浏览 0提问于2014-01-03得票数 6

回答已采纳

1回答