固定高度的中心图像位置如何

我无法以固定的高度很好地显示图像，因为显示拉伸，我想定位图像。固定高度的中心图像位置如何

我想使用300px的固定高度的大图像，但图像不能显示拉伸。

图像链接必须在img标签中，因为它来自数据库。

我把这里的示例代码：

.image 
 
{ 
 
    position:relative; 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 

 
.image img 
 
{ 
 
    width: 100%; 
 
    height: 300px; 
 
}

<div class="image"> 
 
    <img src="http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg"/> 
 
</div>

谢谢

来源

2017-06-14 user3242861

您可以使用object-fit来获得相同

对象配合属性定义一个元素如何响应高度和其内容框的宽度。它旨在将其他可嵌入媒体格式的图像，视频和与对象位置属性结合使用。对象适合让我们通过裁剪一个内嵌图像，使我们能够细密地控制它在框内如何挤压和拉伸。

填充：

对象配合可以用这五个值中的一个被设置，这是其拉伸图像以适合内容框中，而不管其纵横比的缺省值。

包含：增加或减少图像的大小以填充框，同时保留其纵横比。

遮盖：图像将填充其盒子的高度和宽度，一旦再次保持其纵横比但经常在中裁剪图像的过程。 none：图片会忽略父母的高度和宽度，并保留其原始大小。

缩小比例：图像将比较无和包含的区别，以找到最小的具体物体大小。

Object-fit

.image 
 
{ 
 
    position:relative; 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 

 
.image img 
 
{ 
 
    width: 100%; 
 
    object-fit:cover; 
 
    height: 300px; 
 
}

<div class="image"> 
 
    <img src="http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg"/> 
 
</div>

来源

2017-06-14 09:53:26 LKG

您可以使用此

.image 
 
{ 
 
    position:relative; 
 
    width: 100%; 
 
    height: 300px; 
 
background-image:url('http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg'); 
 
background-size: cover; 
 
}

<div class="image"> 
 
    
 
</div>

来源

2017-06-14 09:57:20 danu

使用background-image内联，只是掩盖它使用background-size: cover;

.image 
 
{ 
 
    position:relative; 
 
    width: 100%; 
 
    height: 300px; 
 
     background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
}

<div class="image" style="background-image: url('http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg'); "></div>

来源

2017-06-14 09:58:24

不能使用宽度和高度的图像标签，将拉伸图像。所以使用宽度或高度。

.image 
{ 
    position:relative; 
    width: 100%; 
    height: 300px; 
} 

.image img 
{ 
    max-height: 300px; 
}

或使用

object-fit:cover;

但图像将裁剪。

来源

2017-06-14 09:58:51

固定高度的中心图像位置如何

回答

相关问题