responsive-images

0热度

1回答

我发现了这条线上的一些查询，他们要么没有解决方案，要么他们的解决方案对我不起作用。我设置了媒体查询，其中最小的是最大宽度（700px），当我在桌面上预览网站时，我的浏览器设置为iPhone的宽度，它预览的很好。但是，在我的实际iPhone上预览时，它只显示照片的一小部分。（在Safari和Chrome中）。我不确定Android设备，因为我没有人测试。编辑：在http://www.dragon

0热度

2回答

自动高度与动态高度图像

我搜索了很多关于height:auto的信息，但我没有找到解决我的问题的方法。我需要动力高度全宽的图像，但是，这并不工作:(任何人都可以帮助！ HTML： <div id="roster"> <div class="image"></div> </div> CSS #roster{} #roster .image{ background-image:("http://nhla

0热度

1回答

高效响应的图像吞咽

我试图高效地生成响应图像在网站上使用，但在处理现有文件和路径的时候遇到了一些麻烦。图像驻留在分层结构的文件夹中，其中pages是具有向下递归的多个子文件夹的根，其中大部分都具有图像。我现在的任务是这样的： gulp.task('responsive', function() { gulp.src('pages/**/*.{jpg,png}') .pipe($.plumber(

2热度

1回答

HTML srcset - 何时使用x描述符？

我正在阅读HTML5中的响应图像，并有一个问题。什么时候使用x描述符？例如，如果你有相同图像的不同分辨率版本，为什么你不使用w描述符？据我所知如果定义： <img src="fallback.img" alt"txt" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w,"

0热度

1回答

什么是无法在移动设备上加载图像的有效，高效且现代的方式？

我已经遇到过这么多次，总是用CSS和JS的组合来解决它，但随着对响应图像的支持越来越多，我一直在寻找更有说服力的解决方案。我只是试图而不是加载移动图像，同时保留语义（所以没有CSS background-image），利用浏览器预加载（所以没有JS懒惰加载）。我该如何做到这一点？

3热度

2回答

背景封面不能在移动设备上工作

我正在尝试创建一个具有fullpage背景图片的网站。我已经得到它在桌面版本上的工作，但是当我将它推到github并在手机上查看时，背景图像只是顶部的一个长图像。我在我的css中使用background-size: cover。下面的屏幕截图。如何在移动设备上占用整个空间？谢谢:) 桌面版本：手机版： .background1 { /* Location of the image */

0热度

1回答

当屏幕变得更小时，元素会被压扁

我正在使我的网页响应，但努力保持网页上的元素不会彼此超越。我对web开发很陌生，所以我甚至不知道如何解决这个问题。我真的很感谢在这个阶段的一些一般性建议，以帮助我解决问题并向前迈进。

2热度

2回答

如何使图像自动调整大小以适应与高度相关的浏览器窗口

我正在尝试使图像适合浏览器窗口与其高度相关并动态响应窗口大小。我需要图像宽高比保持不变，但如果在大屏幕上查看图像，图像可能大于原始分辨率。我不希望图像溢出屏幕外，并创建一个scolling效果。图像必须保持居中放置，既是垂直也是水平的容器。 Here is an example of what I am trying to achieve.

1热度

1回答

如何测试srcset算法

我在问这是因为在我的Mac Retina和Google Chrome开发者工具中，我无法看到srcset中的其他图像。 <img srcset="image-415.jpg 415w, image-768.jpg 768w, image-992.jpg 992w, image-1440.jpg 1440w" src="image-1440.jpg

0热度

1回答

获取灵活的水平缩放图像在Safari中工作

我正在一个网站上工作，我必须在左右两侧裁剪图像并居中。我发现了一个解决方案，使用此代码：http://codepen.io/anon/pen/dXMrWj <div class='container'> <img src='https://source.unsplash.com/category/nature/800x1000/daily'> </div> - body {