当前位置：文江博客话题详情

使用 CSS 在 div 内缩放和重新定位图像？

发布于 2024-08-30 16:03:42 字数 303 浏览 5 评论 0原文

我们知道如何使用 CSS 仅显示 div 中图像的部分（即图像精灵），但该图像必须是背景图像。

我们知道如何使用 CSS 来缩放图像，但图像必须是 IMG。

有谁知道一种缩放和图像并仅显示其中一部分的方法？

例如，我想：

显示像素 (15,15) 到 (100,100)，并将
其放大 200%。

第一个我可以通过制作背景图像来完成。第二个我可以通过将其设为前景图像来完成。但到目前为止，我还没有确定如何做到这两点。是否可以仅使用 CSS/HTML？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

緦唸λ蓇 2024-09-06 16:03:42

您可以像平常一样缩放图像。然后，使用容器 div 裁剪图像。要设置裁剪矩形的位置，请在图像（而不是包含的 div）上使用 position:relative。以下是使用 stackoverflow 徽标的示例：

<style type="text/css">
div {
    /* Set size of crop area. Setting its location happens bellow. */
    width: 150;
    height: 100;
    overflow: hidden;  /* Crop it like it's hot! */

    /* not part of the implementation; only to display what's going on */
    border: 1px solid black;
    background-color: #ddd;
}

img {
    /* Set the crop location by shifting the image
     * up by 70px and to the right by 30px.
     */
    position: relative;
    top: -70px;
    left: 30px;

    /* Scale the image as you normally would. */
    width: 300px;
    height: 150px;
}
</style>

<div>
  <img src="http://sstatic.net/so/img/logo.png">
</div>

You could scale the image just as you would normally. Then, use a container div to crop the image. To set where the crop rectangle goes, use position: relative on the image (not the containing div). Here's an example using stackoverflow's logo:

<style type="text/css">
div {
    /* Set size of crop area. Setting its location happens bellow. */
    width: 150;
    height: 100;
    overflow: hidden;  /* Crop it like it's hot! */

    /* not part of the implementation; only to display what's going on */
    border: 1px solid black;
    background-color: #ddd;
}

img {
    /* Set the crop location by shifting the image
     * up by 70px and to the right by 30px.
     */
    position: relative;
    top: -70px;
    left: 30px;

    /* Scale the image as you normally would. */
    width: 300px;
    height: 150px;
}
</style>

<div>
  <img src="http://sstatic.net/so/img/logo.png">
</div>

回复收藏 0 原文

~没有更多了~