我很想从photoshop转换成CSS，希望有人可以帮助我。
我在photoshop中有很多层，我需要将它们转换为CSS。许多层包括宽度约为2500px的图像。
我正在使用bootstrap，所以我的网站很自然地响应。现在我应该留下2500px的宽度并添加一个＆＃39; img-responsive＆＃39;类？它似乎工作（类缩小图像），但图像大小仍然很大，加载需要很长时间。我应该减少这些图像的宽度和高度吗？这会影响更大屏幕上的用户界面吗？
谢谢！
答案 0 :(得分：2)
程序是建立一个适合设计的网站。
不要简单地拍摄PSD图层，将其转储到巨型图像中，然后将其放在页面上。 解释设计并决定如何构建页面。您需要决定应该动态调整的大小以及应该保持静态的内容。根据设计和技能，您可以根据自己的需求找出最佳效果。
答案 1 :(得分：0)
如果您希望图像流畅（响应在这里不那么相关），您可以为图像设置宽度，但要保持高度自动;他们会调整到那个宽度。所以：
img{width:100%; height:auto /*default*/; max-width:2500px;}
见这里：jsfiddle
答案 2 :(得分：0)
您有很多问题，所以我会以列表格式回答：
问：“我应该留下2500px的宽度......”
答：Bootstrap当前版本3.2的最大容器宽度为1170px，因此我不确定为什么你有2500px的图像，除非它们是背景或类似的东西。您应该调整图像大小以适合您支持的最大桌面大小的布局。
问：用CSS类缩小img之后，大小很大......“我应该减少那些图像的w＆amp; h吗？”
A：缩放图像以适应最大的桌面布局，然后在Photoshop中使用“Save for web”来正确压缩图像大小。对于JPG，我通常使用65的质量。如果它是一个bg img，你可以使用较低质量的设置（40-50），只是玩它。
问：“这会影响更大屏幕上的用户界面吗？” 答：是的，它会对更大的屏幕产生负面影响。例如，如果您将全宽标题图像保存为768像素以容纳平板电脑，那么它在桌面上看起来会像素化（模糊）。答案 3 :(得分：0)
与图像有关，有几种方法可以不为小型设备加载大图像，这里有两种。
使用服务器端检测，例如https://github.com/serbanghita/Mobile-Detect/或http://adaptive-images.com/，并提供适当大小的图像。后者为你做了很多工作。两者都是php，可能还有其他语言的分支。
然后，即使有了这个IMO最佳解决方案，你也可以使用一个可以流畅地调整图像大小的类，例如“img-responsive”或者你自己制作的类，以使它变得流畅。
使用移动优先css并使用背景图片，您可以在容器上使用百分比或vh（或组合回退）并使用background-size：cover，然后使用媒体查询从最小到最大开始。制作600px，1000px，1600px和2500px等图像，然后进行最小宽度的媒体查询以加载背景图像。使用Modernizr为无法理解后台大小css的浏览器创建后备（如果您支持IE8或其他旧版浏览器）。