Question

我需要CSS background的算法/数学计算。当我们为页面编写样式时，有时我们使用背景图像作为元素背景样式，语法如下：background: url('img.jpg') center top;此样式提供浏览器以在浏览器大小更改时自动更改背景图像大小我们也可以只看到我们风格元素的中心一侧。但也许我们需要一个没有背景属性的图像（在我的例子中），如下所示：<img src="img.jpg">。以下示例的最后一个是我的问题。我想自动更改它，并且只显示图像的中心一侧，就像css的背景属性一样。现在，我正在考虑使用javascript解决这个问题，但我需要一个来自浏览器的算法。它如何根据浏览器大小调整图像大小以及如何仅显示图像的中心...

所以我的意思是如何在background-position:center;

的javascript中获得相同的结果

我希望你明白我的意思......

Answer 1

您是否在寻找this之类的内容？

HTML：

full image:<br/>
<img src="http://lorempixel.com/400/200"></img><br/>
smaller, centered image:<br/>
<div class="container"><img src="http://lorempixel.com/400/200"></img></div>

的CSS：

.container{
    width: 200px;
    height: 150px;
    text-align: center;
    overflow: hidden;
}

.container img{
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

Css可以实现很多，你不必总是去js。如果要更改图像，只需将margin-left / margin-top属性更改为图像宽度/高度的一半。

用于将图像缩放到浏览器大小的算法

1 个答案: