在 Photoshop 中使照片不像素化

Question

我是 Photoshop 的新手，似乎无法找到如何执行此操作...我有一个 div 即 col-lg-2 并且我有一张要放置的图像div。当我开始缩小屏幕尺寸时，使图像不变成 pixelated/dis-proportional 的最佳方法是什么。我正在使用 bootstrap，所以我希望它在 27 英寸屏幕上看起来和在 iPhone 上一样。

任何人都可以指出如何实现这一目标的正确方向吗？我知道这与照片的质量有关，我不希望 CSS 能够做到这一切。我原图的分辨率是640x425.

我的标记

 <div class="col-lg-2 col-md-4 col-sm-6 newClass">
        <div class="module">
            <img style="width: 100%; height: 100%;" src="Images/myimage-image.jpg"/>
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;">This is some sub-text

                </h2>
            </header>
        </div>
    </div>

CSS

 .newClass {
        /*background-color: lightgray;*/
        padding: 0px !important;
        margin: 0px !important;
    }

.module {
        /*background-color: #abc;*/
        background-attachment: fixed;
        /*width: 400px;*/
        height: 300px;
        position: relative;
        overflow: hidden;
    }

        .module > header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px 10px;
            background: inherit;
            background-attachment: fixed;
            overflow: hidden;
        }

            .module > header::before {
                content: "";
                position: absolute;
                top: -20px;
                left: 0;
                width: 200%;
                height: 200%;
                background: inherit;
                background-attachment: fixed;
                -webkit-filter: blur(4px);
                filter: blur(4px);
            }

            .module > header::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.25);
            }

            .module > header > h1 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

            .module > header > h2 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

图片

Answer 1

Bootstrap 有 .img-resonsive class 可用，您可以将其添加到 <img> 标签中。这将应用一些默认的 CSS 规则，允许图像缩小到较小的屏幕尺寸。

此处提供有关响应式图片的更多详细信息：http://getbootstrap.com/css/#images

通常，从大屏幕尺寸移动到小屏幕尺寸不会对图像质量产生负面影响。现代浏览器在其缩放算法中使用双三次下采样，这与 Photoshop 在应用程序中对图像的下采样方式相当。

在 Photoshop 中使照片不像素化

Make Photos Non-Pixelatedin Photoshop

html

css

photoshop

twitter-bootstrap