响应式设计中保持纵横比并提供最佳流体图像

• 下载演示 - 1.2 MB

引言

也许你已经面临过在尝试为不同的视口提供不同的图像时保持纵横比的问题。使用 <div> 标签你无法保持纵横比，但我找到了一种可以使你的生活更轻松的解决方案。

它是如何工作的

所需材料

• 具有所需纵横比的透明 PNG 图像 (transparent-ratio-conserver.png)
• <IMG> 标签
• 为不同的视口提供不同的图像 (retina.jpg, desktop.jpg, tablet.jpg...)

这个想法是打开一个 <img> 标签，并为其分配一个透明图像（具有我们想要的纵横比）。我们还添加 class="responsive-image"，HTML 中就完成了所有操作。

<img src="img/transparent-ratio-conserver.png" class="responsive-image">

在 CSS 中，我们将 background-size 设置为适应 <img>，并选择图像的宽度。

.responsive-image{
	width: 100%;
	background-size: 100% 100%;
} 

最后，为每个视口提供正确的图像

/* Retina display */
@media screen and (min-width: 1024px){
	.responsive-image{
		background-image: url('../img/retina.jpg');
	}
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
	.responsive-image{
		background-image: url('../img/desktop.jpg');
	}
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
	.responsive-image{
		background-image: url('../img/tablet.jpg');
	}
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
	.responsive-image{
		background-image: url('../img/mobile-hd.jpg');
	}
}
/* Mobile LD */
@media screen and (max-width: 350px){
	.responsive-image{
		background-image: url('../img/mobile-ld.jpg');
	}
} 

你可以从 这里 下载演示。

关注点

在此解决方案之前，我们需要进行复杂的计算，才能使 <div> 标签保持一定的纵横比，如文章中所述：responsive-background-images-with-fixed-or-fluid-aspect-ratios。

感谢您发送反馈。