查找占用所有宽度但仅占页面高度的25％的图像

问题描述：

我无法找到占用页面整个宽度并仅占页面高度25％的图像。只要我改变图像的CSS，它看起来很奇怪，因为它的宽度与高度相比太大了。有人知道我在哪里可以找到适用于此的图像吗？或者我该如何处理这个问题？查找占用所有宽度但仅占页面高度的25％的图像

先谢谢您，

您对图片的宽高比有问题吗？ –

@AlexisWollseifen是的。 – SaraFatih

答

您有很多方法可以解决这个问题。一个简单的方法是使用background-image属性代替<img>标签。

如：

div.image { 
    background-image: url('your/img/path.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover (will cover all the div surface) || contain (will fully contains your image); 
}

小提琴：

div.image { 
 
    display: block; 
 
    width: 100%; 
 
    height: 50vh; 
 
    
 
    background-image: url('http://musiccitiessummit.com/wp-content/uploads/chicago-1.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    
 
    background-position: center center; 
 
}

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

编辑如果你有<img>标签的工作，看看这个object-fit属性：https://css-tricks.com/almanac/properties/o/object-fit/

答

没有一张图像适合所有场景，因为有许多不同长宽比和不同分辨率的屏幕。

您必须向您说明艺术指导以及您的页面按照视图端口尺寸显示的响应度。您必须使用@media，并查看图片元素，源元素和srcset属性，因为您的页面必须首先移动友好。

查找占用所有宽度但仅占页面高度的25％的图像

相关推荐