Question

我的图像分辨率为1000px * 1000px，

这是我的HTML：

<style> 
 .test{
  width: 400px;
  height: 400px;
  }
</style>

<div class="test"> <img src="..."/> </div>
<div class="test"> <img src="..."/> </div>
<div class="test"> <img src="..."/> </div>
<div class="test"> <img src="..."/> </div>

如果原始图像全身，我想在div上只能看到脸部。我不知道怎么做。

任何人都可以帮助我吗？提前致谢

Answer 1

让我们从这个版本开始，然后让我们看看我们最终的位置。这是1000x1000px图像以400x400px DIV元素为背景居中的示例。什么样的幻灯片适用于它？

＆＃13;

div{
    background: url('http://curezone.com/upload/Members/New02/nasa1R3107_1000x1000.jpg');
    background-position: center; 
    width: 400px;
    height: 400px;
}

＆＃13;

<html>
<body>
	<div>
	
	</div>
</body>
</html>

＆＃13;

在你的情况下你可以玩这样的数字（EDITED）：

＆＃13;

.test{
        width: 300px;
        height: 300px;
        border:5px solid red;
        position: relative;
        background: url('http://winniecooper.net/flores/pics/snow%20umbrella.jpg');
        background-position: 50% 75%;
        background-size: 1000px 1000px;
        -webkit-transition: background 1s;
        -moz-transition: background 1s;
        -o-transition: background 1s;
        transition: background 1s;
}
.test:hover{
        background-position: 0% 75%;
}

＆＃13;

<div class="test">  </div>

＆＃13;

更新：o）
根据您提供的链接，我可以大致说明它是如何完成的（或者我会这样做）。这个网站有DIV，宽度为500％，分为5 DIV，每个父DIV的宽度为20％（所以全屏宽度，你将有4个DIV，宽度为25％）。每个DIV内部都有100％宽度的父DIV。所以你当时只会看到一张图片。使用某些脚本可以更改主DIV的位置。我将更改样式属性左侧的主DIV值，并将转换应用于将该动画更改为幻灯片的DIV。 full screen slider

Answer 2

使用这个黑客。

让所有<img>标记对同一图像具有src值（例如transparent-image.png）。使用图像编辑器，将图像opacity设置为零，从而使图像完全透明。此透明图像的大小应为1像素×1像素。
然后在所有<img>代码上设置内嵌样式，并将background-image设置为您选择的图片。了解src上设置的opacity值（transparent-image.png即<img>设置为零的图片）不会妨碍其自定义background-image的可见性在内联样式。这是因为图像不透明度设置为零。
最后，在<img>代码上创建一条css规则，并将background-position设置为center垂直和center水平。例如;

.test img { background-position: center center; }

下面是我所解释的所有模板。

HTML

<div class="test"> 
    <img src="transparent-image.png" style="background-image:url(image1.jpg)" /> 
</div>
<div class="test"> 
    <img src="transparent-image.png" style="background-image:url(image2.jpg)" /> 
</div>
<div class="test"> 
    <img src="transparent-image.png" style="background-image:url(image3.jpg)" /> 
</div>

CSS

.test {
    width: 400px;
    height: 400px;
}

.test img {
    background-position: center center; /* you can adjust this with values. Eg 50% 50% */
    background-repeat: no-repeat;
    background-size: cover;
}

古德勒克！

Answer 3

这就是您要搜索的内容：

.test img {
  position: absolute;
  top:50%; 
  left:50%;
  -webkit-transform:translate(-50%,-50%);
}

重写，这会使容器内的较小图像居中于此example

Answer 4

你可以试试这样的......

HTML

<div class="test"> <img src="http://placehold.it/300x150"/> </div>

CSS

.test{
    width: 400px;
    height: 400px;
    background-color: #000000;
  }

.test img {
    width:350px;
    height: 150px;
    display: block;
    margin: 0 auto;
}

JSFiddle

显然，这是基于您的代码，您可以根据需要调整宽度。

有很多地方你可以更多地了解这一点。 W3.org有一篇很好的文章。

N.B。这是基于您只想水平居中图像的假设。如果您需要垂直居中，请告诉我们。

如何在div中创建中心图像？

4 个答案: