当我在小屏幕上使用background-size: contain;时,我想用图像做一个响应式背景,这很棒,但在大屏幕上,我的图像太大了。如何使用HTML和CSS确定最大宽度和高度。
background-size: contain;
8yparm6h1#
您可以根据屏幕大小使用媒体查询切换background-size。例如,如果您的图像宽度为640px:
background-size
body { min-height: 100vh; background-image: url(http://placekitten.com/640/480); background-position: center; background-size: contain; background-repeat: no-repeat; } @media(min-width: 640px) { body { background-size: auto; } }
ibrsph3r2#
你可以在你的css中使用媒体查询。
@media (background-size: contain){ // rules for when the background-size: contain is applied }
2条答案
按热度按时间8yparm6h1#
您可以根据屏幕大小使用媒体查询切换
background-size
。例如,如果您的图像宽度为640px:ibrsph3r2#
你可以在你的css中使用媒体查询。