如何让图片完全按比例显示在@media屏幕上？
在@media屏幕上实现图片完全按比例显示的方法是通过CSS的background-size属性来实现。具体步骤如下：
- 首先，为图片所在的元素设置一个固定的宽度和高度，例如：
.container {
width: 100%;
height: 300px;
}- 接下来，将图片作为元素的背景，并设置背景大小为cover，这样可以保证图片完全覆盖元素，并按比例缩放：
.container {
background-image: url("图片链接");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}- 最后，在@media查询中，根据不同屏幕尺寸设置不同的高度，以适应不同的设备：
@media screen and (max-width: 768px) {
.container {
height: 200px;
}
}
@media screen and (max-width: 480px) {
.container {
height: 150px;
}
}这样，无论在何种屏幕尺寸下，图片都会按比例完全显示在元素中。需要注意的是，这种方法只适用于将图片作为背景的情况，如果直接在HTML中使用img标签显示图片，则需要使用其他的技术手段来实现按比例缩放。
相关·内容
3回答
Ipad上的背景图像不会100%显示
ios、css、html、ipad
我使用的背景图像(是固定的)以Web格式100%显示，但当我在Ipad (1024x768)上模拟它时，图像不再适应屏幕的宽度，它只填充了大约70%的屏幕高度。
这是我在网站格式中使用的CSS：
.body{
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
height: 5700px;
width: 100%;
}
这是我在Ipad样式中使用的
浏览 2提问于2017-08-02得票数 0
回答已采纳
3回答
CSS可使图像调整大小并适合任何屏幕
css、image、responsive-design
我一直在使用的一个临时页面，但我无法调整图像的大小，使其在所有屏幕分辨率下都是相同的。在iPhone上，它切断了女孩的腰部之前，它非常适合在我的19英寸笔记本电脑屏幕上观看与分辨率为1366x768，甚至当我从我的笔记本电脑通过录像机提供给我的55英寸电视视频。然而，当我在分辨率更高的更大的显示器上观看时，有一个很大的空间和明显的视图，图像尺寸结束的地方。我想我可以通过/* Tablet Landscape */ @媒体屏幕和(max-width: 1060px) { #wrapper { width:67%；}}来调整CSS的大小
/* Tabled Portrait */
浏览 0提问于2013-11-01得票数 15
回答已采纳
1回答
我的图像在移动电话上显示时没有响应
responsive-design、responsive-images
是500px的平方。当它离线时，它是响应的，但当它在线时，它就不响应了。
我的css
#container {
margin: auto;
position:absolute;
top: 0; left: 0; bottom: 0; right: 0;
max-width: 500px;
max-height: 500px;
}
@media screen and (min-width: 240px) and (max-width: 480px) {
#container {
width: 90%;
}
}
HTML
浏览 3提问于2019-10-09得票数 1
1回答
背景图像在较小屏幕上不缩放
html、css、twitter-bootstrap、responsive-design、background
我对这个前端的东西很陌生。我有一个图像1200 * 900 px，我正在使用作为我的旗帜的背景。这个图像在大屏幕上似乎很好，但是当我从响应式设计模式切换到Apple iPhone 6S时。背景使卡特从侧面脱落。我如何保持完整的形象，而仍在较小的尺寸。
index.html
<div class="container-fluid banner">
<div class="row">
<div class="col-md-8 content">
&
浏览 3提问于2018-05-30得票数 1
回答已采纳
3回答
如何在IE8中使背景图片按比例放大？
html、css、internet-explorer、cross-browser
我有一个带有背景图像的div，在包装中如下所示：
<div id="imageholder">
<div id="image">
</div>
</div>
#imageholder {
width: 100%;
height: 500px;
overflow: hidden;
}
#image {
width: 100%;
height: 100%;
background-image: url(image.jpg);
background-size: cover;
/*IE HACK*/
filter
浏览 14提问于2013-12-11得票数 1
2回答
如何在所有不同大小的屏幕上保持相同的背景图像比例/大小？
css、background-image
如何保持背景图像的比例不变，以使其看起来适合所有不同的屏幕尺寸？换句话说，我如何确保背景图像看起来总是完美的“居中”。请注意，我还有其他几个屏幕与其他背景图像，所以解决方案应该适用于不同的图像，而不仅仅是下面的房子。
CSS：
#background{
background-image: url("../images/houses.png");
background-color: whitesmoke; /* Used if the image is unavailable */
height: 100%; /* You must set a sp
浏览 24提问于2020-02-15得票数 0
回答已采纳
2回答
通过@Media屏幕改变背景图片
html、css、responsive-design、media-queries
所以我试着用手机而不是浏览器来改变我的背景图像。背景写在style.CSS文件中，但显然我做错了什么，因为无论如何它都不会改变图片。
这是我的CSS代码。
body {
font-family: "Open Sans", sans-serif;
background-color: #040404;
color: #fff;
position: relative;
background: transparent;
}
body::before {
content: "";
position: fixed;
background:#
浏览 4提问于2020-08-16得票数 0
回答已采纳
2回答
我有一个图片大小:240 picture /240 picture。这个大小的图片必须只在宽屏幕上，在移动上这张图片必须是80 of /80 of。我曾经尝试过：
.picture{
height:100%;
min-height: 240px;
background: url("../../img/picture.png") no-repeat;
background-size: cover;
background-position: 50% 50%;
}
@media screen and (max-width: 48
浏览 1提问于2015-06-22得票数 0
回答已采纳
1回答
高分辨率/全尺寸视网膜背景
css、background-image
如何添加视网膜背景，如果您希望背景适合元素的整个区域，如果元素具有任意宽度，这取决于用户的屏幕大小。
#home_data_communication {background:url(../images/home/data-com-bg.jpg) no-repeat; background-size:cover; border-bottom:1px solid #cccccc;}
我能做这些
@media
(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#home_data_communication {bac
浏览 3提问于2015-07-01得票数 1
3回答
一个背景图像在两个div之间拆分
html、css、bootstrap-4、background-image
第一次为解决方案而苦苦挣扎，所以我再次发布更多信息。提前感谢您的反馈。
在我正在建设的网站上，目前我有2个背景图片设置为2个不同的div，但它们需要在所有设备上完美排列。
目前，背景图像排列在1920px宽和更小，但一旦你开始变得更大，它开始移动。
有人能帮帮忙吗？
请查看它应该与之类似的图像
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg&#
浏览 1提问于2020-08-19得票数 1
1回答
在HTML中创建大小为100%x 660 px的响应式横幅
jquery、html、css
我想创建响应式横幅，其全屏幕尺寸为100% x 600px。
这是我的代码，
<style>
/* default height */
#ad {
height: 660px;
width: 100%;
}
@media only screen and (height:90px) {
/* 90 pixels high */
#ad {
height: 690px;
width: 100%;
}
}
@media only screen and (height:125px)
浏览 0提问于2017-07-29得票数 2
4回答
背景图像在移动屏幕尺寸上超出内容
jquery、html、css、responsive-design
我设计了一个网站，这是响应式的。我在我的一些网页中使用固定的背景图像。问题是，在移动屏幕上，图像没有响应，它超出了边界(内容)。。。我已经用谷歌找出了原因，但我发现唯一的方法是将图像转换为wbmp格式。
当我将图像转换成wbmp时，html根本不接受。。。有没有办法让图像以响应式的方式显示在小屏幕上？
或者任何我应该使用的工具？
css
body{
background:url(../images/gallery-1-big.jpg) center center fixed no-repeat;
background-size:cover;
-webkit-backgrou
浏览 0提问于2016-08-31得票数 0
1回答
如何使一个div响应的背景？
html、css、media-queries
我有一个水平放置在身体中间的容器，这个容器里面包含一个div，这个div有一个背景，我希望这个div的背景在缩小或调整窗口大小时，像这个站点，我使用了background-size: cover;，但是它不适合我。
HTML
<div class="container">
<div class="cover"></div>
</div>
CSS
.container {
width: 851px;
margin: 0px auto;
}
.cover {
background-image: url
浏览 6提问于2017-05-26得票数 0
回答已采纳
2回答
图像在桌面和移动平台上没有显示相同的内容。
html、css、mobile-website、display、photography
我有一个摄影网站，我的网站的目标是显示图片在页面上一个接一个。非常简单。然而，该网站并没有在桌面和移动平台上统一显示。到目前为止，该网站在iPhone 5和S7上都很完美。它在某些桌面和具有较大css像素宽度的移动设备上对图像进行调整和调整存在问题。我不知道怎么解决这个问题。我将包括以下的html和css。提前感谢！
链接到网站
CSS
@media screen and (max-width: 320px) {
/* Smaller Devices */
img{
width: cover;
max-width: 100%;
height: cover;
浏览 1提问于2016-11-30得票数 0
回答已采纳
1回答
背景图像和响应性问题
html、css、responsive-design、magnific-popup
我正在使用Magnific并排显示两部分内容；左侧是一个带有背景图像的div，背景图像可以有两种不同的大小，但问题是我很难用响应式的尺寸来填充它们的容器。
目前，我不得不手动设置每一个的宽度和高度，这是我试图避免的。我选择了背景图片，而不是img元素，这样我就可以在手机上显示不同的图片。
我尝试了各种background-size、position和height值，但都无济于事。我想如果我理解了这个问题，我会更幸运地解决它。我假设问题出在图像div的一个容器上。
HTML：
<div class="left-half">
<div class="pop
浏览 0提问于2015-11-20得票数 0
2回答
用于媒体查询和高度问题的css
css、media-queries
我有一个div的图像背景，我想在不同的设备上显示，问题是我必须给出图像的高度，以便正确地适合它。现在在不同的手机上，我必须用不同的像素来调整高度。例如，在iphones上，65px适用于纵向模式，但不适用于横向模式等。有没有一种方法可以调整div的高度，以覆盖100%的背景图像？以下是我的代码
<style>
div.testing {
height: 95px;
background-image: url(/myimageurl);
background-repeat: no-repeat;
backgrou
浏览 0提问于2013-06-02得票数 0
回答已采纳
1回答
如何将几个div与背景图像对齐
css、background-image
我有一个非常大的图像作为背景图像。因为这张图片太大了，我把它分成三张，一张叠在另一张上面。
我将这些图像作为背景图像，属性为"cover"：
<div class="screen" id="header1"></div>
<div class="screen" id="header2"></div>
<div class="screen" id="header3"></div>
css：
#header1
{
浏览 1提问于2013-12-23得票数 1
1回答
媒体查询的特殊性-为什么在使用最大宽度媒体查询时使用最大的样式？
css、media-queries、css-specificity、css-cascade
我有以下(简化的)示例代码：( jsbin： )
SCSS：
.container {
background: none;
}
@media screen and (max-width: 480px) {
.container {
background: red;
}
}
@media screen and (max-width: 768px) {
.container {
background: white;
}
}
@media screen and (max-width: 1024px) {
.container {
back
浏览 2提问于2015-10-30得票数 1
回答已采纳
5回答
为什么媒体查询在移动和平板电脑上不起作用
html、css、responsive-design
我的媒体查询按预期在我的桌面上工作，但不在移动电话或tablet.Please中，请查看这里的实时代码。
如果屏幕大于1024 is，它应该是绿色的，我的平板电脑屏幕是，但是背景保持黄色。
这也发生在我的手机上，不管是什么保持黄色。
或者读到下面
我的html：
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" media="all" type="text/css" href="style.css"/&
浏览 7提问于2013-08-08得票数 0
回答已采纳
1回答
ReactJS-移动设备上的间距问题，而不是桌面上的？
javascript、css
在桌面上，所有东西垂直排列都很好，但在移动设备上，我的两个下部之间有一个巨大的间隙。我想可能是我的媒体问题出了问题。这是网站..。AstroMojis.io这里是我的css样式表...问题可能出在别的地方吗？ ? import styled from 'styled-components';
import { MdKeyboardArrowRight, MdArrowForward } from 'react-icons/md';
export const HeroContainer = styled.div`
background: #ff
浏览 14提问于2021-10-29得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
