关键词：
【中文标题】响应式缩放由多个重叠的不同大小图像组成的 css 动画徽标【英文标题】：Responsively scale css-animated logo made up of multiple, overlayed, different-sized images 【发布时间】：2015-09-26 04:38:31 【问题描述】：所以我在使多图像、叠加的动画徽标变得响应时遇到了一些麻烦。
这是徽标的再现：https://jsfiddle.net/vk0w42z6/
我已经为此苦苦挣扎了几个小时，并且尽我所能。我使用了 CSS 转换和一些 html 技巧，但它似乎不起作用。
主要问题是由于图像大小不同，我可以使用简单的方法来缩小最大的图像
max-width:90vw;
但较小的叠加图像不会按比例缩小。
那么有人可以帮我让这个徽标响应吗？
我尝试过的事情：
使容器相对，所有子容器都是绝对的 一些 CSS 显示技巧。 （会随着人们推荐的东西不断添加）【问题讨论】：
您最好使用 SVG 来实现这一点……更简单。事实上 SVG 正是你需要的， 你可以缩放整个标题 -- jsfiddle.net/9hb8k8qb 我将通过 SVG 研究解决方案，但与此同时 @Tasos 的解决方案运行良好。 :D 【参考方案1】：好吧，如果你绝对只需要一个 HTML/CSS 响应式徽标，我已经设法实现了这个实现，如下所示： jsfiddle
您可以玩弄百分比值，直到满意为止。这应该可以满足您的大部分需求。
附：我现在删除了动画，因为那里有很多不必要的 CSS 干扰了这个布局。你可以再次实现它。
HTML：
<body style="background-color:#1c1c1c;">
<div style="width:100%;" >
<div style="position: relative; max-width:800px; width: 100%;">
<div id="compass">
<img id="compass-top"
class="compass-top " src="http://icanindia.org/go-sxse/medias/img/spoke-only-white.png "
>
<div style="clear:both;"></div>
</div>
<img
class="compass-bottom-2 " src=
"http://icanindia.org/go-sxse/medias/img/sxse_logo_no_compass.png " style=
"max-width: 800px; width:100%; height:auto; float:left;" >
<div style="clear:both;"></div>
</div>
</div>
</body>
CSS：
#compass
width:20%;
position:absolute;
left:37%;
background:url("http://icanindia.org/go-sxse/medias/img/back-only-white.png ");
background-size:100%;
background-repeat:no-repeat;
【讨论】：
响应浏览器窗口 (CSS) 调整、缩放和居中图像
】响应浏览器窗口(CSS)调整、缩放和居中图像【英文标题】：Fit,scaleandcenterimageresponsivelytobrowserwindow(CSS)【发布时间】：2015-06-1403:17:18【问题描述】：我如何拥有一张图片，无论是纵向还是横向：水平和垂直居中响应（在调整浏览... 查看详情
响应式调整图像和背景图像的大小
】响应式调整图像和背景图像的大小【英文标题】：Responsivelyresizingimageandbackgroundimageintandem【发布时间】：2021-11-0202:20:37【问题描述】：我有twoimages，一个JPG和一个SVG，必须重叠，JPG位于SVG之上。它们都必须随着视口尺寸的变化... 查看详情
如何创建可根据不同手机尺寸调整大小的响应式图像？
】如何创建可根据不同手机尺寸调整大小的响应式图像？【英文标题】：HowdoIcreateresponsiveimagesthatresizewithdifferentmobilephonesizes?【发布时间】：2021-03-1103:39:18【问题描述】：我正在开发的移动网站https://lowlifeclothing.co/将每个.gif图像... 查看详情
响应式布局：Safari 上的拉伸图像
】响应式布局：Safari上的拉伸图像【英文标题】：Responsivelayout:stretchedimagesonSafari【发布时间】：2020-06-1800:30:31【问题描述】：这是我的布局。期望的行为是，当我垂直调整窗口大小时，图像会保持原始纵横比缩放。我的代码在... 查看详情
在响应式设计中更改 img src？
】在响应式设计中更改imgsrc？【英文标题】：Changeimgsrcinresponsivedesigns?【发布时间】：2012-05-1310:34:16【问题描述】：我即将编写一个可能包含三种不同“状态”的响应式布局。奇怪的部分是大部分文本，例如菜单项将是图像-这不... 查看详情
css使所有不同大小的图像在网格中均匀缩放(代码片段)
响应式网页设计：“如何使用 CSS 根据浏览器窗口大小调整背景图像的大小”？
】响应式网页设计：“如何使用CSS根据浏览器窗口大小调整背景图像的大小”？【英文标题】：Responsivewebdesign:"HowtoresizeabackgroundimageaccordingtobrowserwindowsizeusingCSS"?【发布时间】：2011-12-0110:25:56【问题描述】：我正在创建一... 查看详情
思考响应式设计中的“缩放”
】思考响应式设计中的“缩放”【英文标题】：Thinkingofthe\'zoom\'inresponsivedesign【发布时间】：2013-08-2903:33:08【问题描述】：我正在尝试使用HTML和CSS进行响应式设计，这是我的问题：如果你只调整窗口大小，布局适合，如果你只... 查看详情
带有纯 CSS3 媒体查询的 IE9 响应式图像调整大小问题
】带有纯CSS3媒体查询的IE9响应式图像调整大小问题【英文标题】：IE9responsiveimageresizeissuewithpureCSS3mediaquery【发布时间】：2014-02-1323:06:46【问题描述】：我尝试设置响应式布局设计。我的问题是：在1024*768屏幕分辨率下，没有滚动... 查看详情
响应式笔记
一、媒体查询：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。语法1@mediamediatypeand|not|only(medi... 查看详情
响应式 HTML5 视频 - 在 iOS 中调整大小
】响应式HTML5视频-在iOS中调整大小【英文标题】：ResponsiveHTML5Video-SizinginiOS【发布时间】：2014-04-0716:46:07【问题描述】：我们在显示响应式HTML5视频和调整比例时遇到问题；在桌面浏览器上，缩放比例很好-视频及其海报图像完美... 查看详情
Bootstrap Thumbnail & Caption 类的响应式 CSS
】BootstrapThumbnail&Caption类的响应式CSS【英文标题】：ResponsiveCSSforBootstrapThumbnail&Captionclasses【发布时间】：2014-10-1900:04:51【问题描述】：我正在将Rails、Bootstrap和Imagemagick用于市场应用程序。我有一个缩略图网格，其中上传的... 查看详情
使用现代css的响应式版面
为一个网站选择类型尺寸是项艰巨的任务.标题和段落的尺寸在网页布局和可读性方面处理起来很棘手.谢天谢地,我们有模块化缩放可以引导我们.模块化缩放是一个数字序列以某种方式关联另一个序列.TimBrown,更多版面在版面中应... 查看详情
FabricJS 缩放图像以适应宽度/大小
】FabricJS缩放图像以适应宽度/大小【英文标题】：FabricJSscaleimagetofitwidth/size【发布时间】：2018-08-1802:58:31【问题描述】：如何正确缩放图像以适合容器大小？我想要一个由两个图像组成的网格，每个图像都适合提供的大小。https:... 查看详情
CSS图像缩放以适应区域不扭曲
】CSS图像缩放以适应区域不扭曲【英文标题】：CSSimagescalingtofitwithinareanotdistort【发布时间】：2011-07-1903:57:23【问题描述】：有没有办法使用CSS或其他方式使图像适合某个区域。假设我有多个不同大小的图像，我希望它们都适合15... 查看详情
图像与边缘对齐的响应/缩放 div
】图像与边缘对齐的响应/缩放div【英文标题】：Responsive/scalingdivwithimagealignedtoedges【发布时间】：2021-11-0103:25:04【问题描述】：我正在开发一个设置为表格的网站功能。它包含文本和图像。它也需要响应。我希望将图像放在桌子... 查看详情
响应式布局
...能使页面自适应显示在不同大小终端设备上的页面。2、响应式布局：一个网站能够兼容多个终端，而不是为每个终端都做一个特定的版本，实现响应式布局的方法：bootstrap和CSS原生代码两种方法。3、CSS原生代码是通过@Media媒体... 查看详情
响应式设计：不同屏幕尺寸的不同图像
】响应式设计：不同屏幕尺寸的不同图像【英文标题】：Responsivedesign:differentimagesfordifferentscreensizes【发布时间】：2014-05-0507:12:16【问题描述】：我们的客户希望在小屏幕上显示与在大屏幕上不同的横幅图片。不仅缩小/拉伸以适... 查看详情