[英]How to display banner images which look good on both desktop and mobile view
I have a progressive web app developed in reactjs and in this I am using banner images which look good on mobile view, but when I switch to laptop view the banner images look big.我有一个在 reactjs 中开发的渐进式 web 应用程序,在此我使用的横幅图像在移动视图中看起来不错,但是当我切换到笔记本电脑视图时,横幅图像看起来很大。
I tried to set the height property, but the image looks squeezed on laptop view.我试图设置高度属性,但图像在笔记本电脑视图中看起来被挤压了。 The CSS code for the same is pasted below
下面粘贴了 CSS 代码
banner-container {
padding: 20px;
margin-top: 45px;
.banner-img {
max-width: 100%;
height: auto;
}
}
@media (min-width: 767px) {
.banner-container {
padding: 20px;
margin-top: 200px !important;
max-width: 100%;
.banner-img {
width: 100%;
height: auto;
max-height: 300px;
}
}
}
What is the best way to display banner images which look good on both laptop and mobile view显示在笔记本电脑和移动设备视图上看起来都不错的横幅图像的最佳方式是什么
You can easily manage your banner image with this css property:您可以使用此 css 属性轻松管理您的横幅图片:
object-fit: contain
Or you can look into different values of object-fit in this doc:或者您可以在本文档中查看不同的 object-fit 值:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.