responsive-images 相关问题

响应式图像是响应式网页设计(RWD)的一部分,专门处理网络上的图像,可根据屏幕尺寸,平台和方向在各种设备上提供最佳体验。

使裁剪后的图像在CSS中响应

信息:我的网页顶部有一个裁剪的图像用作背景图像。在CSS中,我以px为单位定义了包含图片的div的大小-正在裁剪图片。 (我正在...

回答 1 投票 0

将img srcset与Vue.js中的数组和数据对象绑定

我在一个数组中有一个图像名称列表,但是我想给它们加上主机前缀,并添加一些有趣的调整大小选项以进行响应。这是我所拥有的:new Vue({el:'#gallery_images',data:{...

回答 1 投票 0

我无法在没有绝对位置和其他功能的情况下居中图像[重复]

我有两个div,每个div都有一个图像和一个标题。我希望图像垂直居中或填充div元素而不会拉伸或任何异常调整大小。我搜索并使用了任何建议,例如How ...

回答 2 投票 0

我需要在图像旁边放置文本,并从上到下堆叠它们

我有一个城市着陆页,在主图像下面,我想要一张带浮标的图片:对;旁边是文本。在此之下,我希望具有相同的内容,但是这次我使用了float:left;。 ...

回答 1 投票 -1

如何在引导程序中设置图像的高度和宽度后如何使图像响应

因此,我正在建立此投资组合,并且我找到了使文本和其他内容响应的方法,但是我无法使图片响应,我将其高度设置为325,但是当我缩小.. 。

回答 1 投票 0

移动srcset结果不一致

关于srcset的另一个问题不起作用,但是我已经遍历了无数问题,其中大多数似乎是'在私有窗口中打开测试”或'srcset在该浏览器中不起作用'...

回答 1 投票 0

在小屏幕尺寸下将响应图像设置为固定的高度和宽度

我正在尝试修改继承的现有页面-该页面正在使用Bootstrap 3.3.7,该页面动态生成HTML(正在从数据库中读取图像URL以及高度和宽度...

回答 1 投票 0

自动响应图像

我的工作流程效率低下,无法生成响应图像。我要做的是(1)安装一个虚拟Wordpress,(2)当我想在我的网站中包含图片时,将原始图片上传到...

回答 1 投票 0

Srcset渲染图像尺寸错误

我正在尝试根据设备的宽度提供响应/自适应图像。原始图像:

回答 1 投票 0

图像在移动浏览器上延伸

与计算机设备工具相比,照片在手机上的表现不同。如图所示,高在移动浏览器中被拉伸。 🡐在计算机上|在电话上(iPhone 6s,相同的东西...

回答 1 投票 0

有没有一种方法可以直接通过javascript直接获得响应式网页设计

我正在建立一个网站,在一部分中,我正在使用JavaScript的createElement属性来构建页面。对于网络浏览器,我拥有所有漂亮的东西,而且我肯定喜欢,...

回答 1 投票 0

图像不适合WKWebView

试图显示以下请求。类ViewController:UIViewController,WKNavigationDelegate {@IBOutlet弱var webView:WKWebView!覆盖func viewDidLoad(){super.viewDidLoad()...

回答 1 投票 0

SVG响应剪辑路径或蒙版图像

我正在尝试将SVG剪辑路径应用于gif(我也尝试过蒙版图像,但在这里也无法获得想要的结果),以使其在所有屏幕的视口范围内...

回答 1 投票 1

我的图像在手机上显示时无响应

1图像为500px平方。脱机时它是响应式的,而联机时则不是。链接到页面My CSS #container {margin:auto;位置:绝对;最高:0;左:0; ...

回答 1 投票 0

网格中的响应图像

我正在使用布尔玛网格框架为我们的学习管理系统定制界面的一部分。我在左侧有一个简单的垂直导航(在大屏幕上为1列),然后有一个...

回答 1 投票 0

使用模态图像

我想在我的回应式网站使用模式的图像。我有我的图片的div作为背景图片。喜欢; I have ...

回答 2 投票 0

如何延迟加载Bootstrap 4卡的图像?

我试图弄清楚如何使用card-img-top来延迟加载卡片列,例如: [[[[]]] 使用JS延迟加载插件,它非常完整和直观。 示例: https://imagekit.io/blog/lazy-loading-images-complete-guide/ URL插件 https://github.com/tuupola/jquery_lazyload HTML <!-- Begin Body --> <div class="container-fluid" id="main"> <div class="row"> <div class="col-md-12"> <h2>Image Grid with Lazy Loading Images</h2> <p class="lead">Images will load as you scroll down</p> <hr> </div> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-body"><img data-original="/assets/templates/tmp_129821.png" class="img-responsive"></div> </div> </div> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-body"><img data-original="/assets/templates/tmp_128936.png" class="img-responsive"></div> </div> </div> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-body"><img data-original="/assets/templates/101004.png" class="img-responsive"></div> </div> </div> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-body"><img data-original="/assets/templates/100993.png" class="img-responsive"></div> </div> </div> </div><!--/row--> </div> </div> JS $('#main .img-responsive').lazyload(); 可以通过多种方式完成延迟加载, 您可以使用此库,只需进行初始化,它使用数据属性“ data-echo”跟踪图像以延迟加载 这里是example,我想你可以轻松做到这一点:) echo.init();

回答 2 投票 4

引导响应图像适合于母公司的高度,拉伸全宽

我有具有一定高度的行(例如600像素),并希望适合一个img(大小1920×1080)到该行,拉伸响应100%到行宽度,但不超过高度。换一种说法, ...

回答 3 投票 1

Srcset无法使用Firefox

我试图使用srcset属性在浏览器达到特定屏幕大小时交换图像。当屏幕尺寸超过768像素宽时,我需要显示桌面图像。我已经能够......

回答 1 投票 1

如何在内联列表中缩小图像以使列表在div更改大小时保持内联?

我在Bootstrap 4中完成的网站标题中有一个社交媒体图标的内联列表。随着屏幕尺寸的变化,缩小尺寸,图像图标保持内联直到它们的div达到1112px然后......

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.