时间戳

首页 > 解决方案 > Macbook / Safari 上的图像拉伸，所有屏幕尺寸

javascript - Macbook / Safari 上的图像拉伸，所有屏幕尺寸

问题描述

有问题的页面： https ://www.fastforwardcomposites.com/foiling-luxury-catamaran-eagle-class

我的客户仅在 Safari 或 Mac OS/Macbook 上遇到拉伸图像。我无法测试原因或修复它，因为我没有 Mac。想知道在我的代码中是否可以做任何事情来防止图像拉伸，同时保持图片的纵横比并在所有屏幕尺寸上正确放大和缩小。我已将宽度设置为 %，将高度设置为“自动”。有问题的代码有点长，因为它位于一个大的选项卡式内容区域内，但您可以放心地假设我在选项卡中设置为响应式的任何图像在 Mac 上拉伸不佳（您可以忽略图库选项卡，这工作正常）。

是否有任何方法可以将图像设置为响应式并在不使用设置 px 值的情况下在 Safari 上调整屏幕大小时对齐容器的大小？还是我唯一的选择是将图像设置为每个可能的屏幕尺寸的特定 PX 高度和宽度？我显然想避免这种情况，因为图像已经响应并且在所有其他浏览器和操作系统上都可以很好地调整大小。多谢你们！

/* ======================================================================== *
 * * * * * * * * * * * * * * * * * * TABS * * * * * * * * * * * * * * * * * *
 ========================================================================== */

.tabs {
    position: relative;
    margin: 40px auto;
    width: 92%;
    max-width: 100%;
    overflow: hidden;
    padding-top: 10px;
    margin-bottom: 60px;
}
.tabs input {
    position: absolute;
    z-index: 1000;
    width: 12.4857142857%;
    height: 50px;
    left: 0;
    top: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    cursor: pointer;
    margin: 0;
}
.tabs input#tab-2 {
    left: 12%;
}
.tabs input#tab-3 {
    left: 24%;
}
.tabs input#tab-4 {
    left: 36%;
}
.tabs input#tab-5 {
    left: 48%;
}
.tabs input#tab-6 {
    left: 60%;
}
.tabs input#tab-7 {
    left: 72%;
}
.tabs input#tab-8 {
    left: 84%;
}
.tabs label {
    background: #e1e1e1;
    color: #333;
    font-size: 14px;
    line-height: 50px;
    height: 56px;
    border-radius: 0;
    position: relative;
    top: 0;
    padding: 0 20px;
    float: left;
    display: block;
    width: 12.5%;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    -webkit-transition: all 150ms ease 0s;
    transition: all 150ms ease 0s;
}
.tabs label:hover {
    cursor: pointer;
}
.tabs label:after {
    content: '';
    background: #d8d8d8;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
}
.tabs input:hover + label {
    background: #b9b9b9;
}
.tabs label:first-of-type {
    z-index: 4;
}
.tab-label-2 {
    z-index: 4;
}
.tab-label-3 {
    z-index: 3;
}
.tab-label-4 {
    z-index: 2;
}
.tabs input:checked + label {
    background: #f0f0f0;
    color: #1a1a1a;
    z-index: 7;
}
.clear-shadow {
    clear: both;
}
.content {
    height: auto;
    width: 100%;
    float: left;
    position: relative;
    z-index: 7;
    background: #f2f2f2;
    top: -10px;
    box-sizing: border-box;
}
.content div {
    position: relative;
    float: left;
    width: 0;
    height: 0;
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    background: #f2f2f2;
}
.content .ec-container, .content .ec-container .gallery, .content .ec-container .gallery div {
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    margin: 20px auto 0 auto;
}

.content div h2 {
    margin-top: 0;
}
.tabs .tab-selector-1:checked ~ .content .content-1,
.tabs .tab-selector-2:checked ~ .content .content-2,
.tabs .tab-selector-3:checked ~ .content .content-3,
.tabs .tab-selector-4:checked ~ .content .content-4,
.tabs .tab-selector-5:checked ~ .content .content-5,
.tabs .tab-selector-6:checked ~ .content .content-6,
.tabs .tab-selector-7:checked ~ .content .content-7,
.tabs .tab-selector-8:checked ~ .content .content-8 {
    z-index: 100;
    opacity: 1;
//width: 100% / $numberOfTabs;
    width: 100%;
    height: auto;
    width: 100%;
    height: auto;
    padding: 4.5%;
}
.content div h2 {
    text-align: left;
    color: #21bca9;
    font-size: 25px;
    text-transform: uppercase;
}
.content div p {
    font-size: 14px;
    line-height: 22px;
    text-align: left;
    margin: 0;
    color: #222;
}

.content-6 {
    background-image: url(https://www.lancewalker.life/images/specs/eagle-class-specs-image-4.jpg) !important;
        background-position: 5% 100% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.tabs-link {
    color: #777;
    text-decoration: underline !important;
}
.tabs-link:hover {
    color: #9e9e9e;
}

.tab-img-lg {
    display: flex;
    margin: 10px auto 60px auto;
    width: 100%;
}

.tab-img-vert {
    margin: 0 auto;
    display: flex;
    width: 32% !important;
    max-width: 32% !important;
    justify-content: space-around;
}

.tab-img-container {
    display: flex;
    width: 100% !important;
    flex-direction: row;
    height: unset!important;
    opacity: 1 !important;
    margin: 60px auto 0 auto;
    justify-content: center;
    flex-wrap: wrap;
}

.img-tabs-container {
    width: 100% !important;
    opacity: 1 !important;
    display: flex;
    height: unset !important;
    flex-wrap: wrap;
}

.tab-img-container-col {
    display: flex;
    width: 48% !important;
    height: unset!important;
    opacity: 1 !important;
    margin: 0 auto 0 auto;
    flex-direction: column;
}

.tabs ul li {
    font-size: 14px;
    line-height: 30px;
    text-align: left;
    margin: 0;
    color: #222;
}

.img-main-tabs {
 width: 100%;
}

.img-below-content-tabs-vert {
    max-width: 32% !important;
    margin: 10px auto;
    height: auto !important;
}

.img-below-content-tabs {
    max-width: 32% !important;
    margin: 10px auto;
    height: auto !important;
}

@media screen and (max-width: 999px) {
    .img-below-content-tabs-vert {
        display: none;
    }

    .img-below-content-tabs {
        display: none;
    }

    .img-tabs-container {
        display: none;
    }

    .img-below-content-tabs-mobile {
        display: flex;
        margin: 10px auto;
        height: auto;
    }
}

@media screen and (min-width: 1000px) {
    .img-below-content-tabs-mobile {
        display: none;
    }
}



@media screen and (max-width: 800px) {
    .gallery img {
        max-width: ~"calc(50% - 40px)";
        margin: 20px;
        transition: opacity 200ms;
        cursor: pointer;
    }

    .gallery-no-lb-2-items div {
        max-width: 90%;
        margin: 20px;
    }

    .asyncGallery__Dots {
        bottom: 15px;
    }

    .asyncGallery__Counter {
        right: 15px;
        bottom: 15px;
        font-size: 12px;
    }

    .asyncGallery__Item {
        width: 100%;
    }

    .asyncGallery__ItemImage img {
        max-height: none;
        max-width: 100%;
    }

    .asyncGallery__ItemDescription {
        padding: 0 20px;
    }

    .asyncGallery__Next,
    .asyncGallery__Prev {
        display: none;
    }

    .gallery {
        display: inline-flex;
    }

    .gallery div {
        max-width: 90%;
        margin: 10px auto;
    }

    .gallery div img {
        max-width: 100%;
        margin: 0 auto;
    }
}

/* ================================================================================= *
 * * * * * * * * * * * * * * * * * * MEDIA QUERIES * * * * * * * * * * * * * * * * * *
 =================================================================================== */


@media screen and (min-width: 768px) {
    .tabs input:checked + label {
        top: -2px;
    }
}
@media screen and (max-width: 767px) {
    .tabs label {
        font-size: 14px;
        line-height: 50px;
        height: 50px;
        display: flex;
        width: 100%;
    }
    .tabs input {
        display: flex;
        flex-direction: column;
        position: absolute;
        z-index: -999;
    }
    .tabs {
        width: 100%;
        margin-top: 0;
    }
    .tabs input#tab-2 {
        left: 0;
        display: flex;
    }
    .tabs input#tab-3 {
        left: 0;
        display: flex;

    }
    .tabs input#tab-4 {
        left: 0;
        display: flex;

    }
    .tabs input#tab-5 {
        left: 0;
        display: flex;

    }
    .tabs input#tab-6 {
        left: 0;
        display: flex;

    }
    .tabs input#tab-7 {
        left: 0;
        display: flex;
    }
    .content {
        top: 0;
    }
    .tab-img-lg {
        margin: 20px auto;
    }
    .tabs .tab-selector-1:checked~.content .content-1,
    .tabs .tab-selector-2:checked~.content .content-2,
    .tabs .tab-selector-3:checked~.content .content-3,
    .tabs .tab-selector-4:checked~.content .content-4,
    .tabs .tab-selector-5:checked~.content .content-5,
    .tabs .tab-selector-6:checked~.content .content-6,
    .tabs .tab-selector-7:checked~.content .content-7,
    .tabs .tab-selector-8:checked~.content .content-8 {
        padding: 40px 15px;
    }
    .tab-img-container-col {
        width: 100% !important;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1599px) {
    .arrow-container {
        top: 70vh;
    }
    .gallery div {
        max-width: ~"calc(25% - 10px)";
        margin: 0 5px 0 5px;
    }
    .tab-img-sm {
        margin: 10px auto;
        width: 46.1% !important;
        max-width: 46.1% !important;
    }
}
@media screen and (max-width: 1200px) {
    .tabs-h2 {
        margin-top: 20px;
    }
    .tab-img-sm {
        width: 46% !important;
    }
    p {
        font-size: 17px !important;
        line-height: 1.9em;
    }
    h2 {
        font-size: 22px !important;
    }
    .content div p {
        font-size: 14px !important;
    }
}

@media screen and (min-width: 1001px) and (max-width: 1200px) {
.tabs label {
    font-size: 12px;
}
}

@media screen and (max-width: 1000px) {
.tabs label {
    font-size: 10px;
}
}

@media screen and (max-width: 766px) {
    .arrow-container {
        display: none;
    }
    .tabs p{
        line-height: 1.7em;
    }
    .panel {
        padding: 8%;
    }
    .tab-img-sm {
        width: 97% !important;
        max-width: 97% !important;
        display: flex;
    }
    .tab-img-vert {
        margin: 10px auto;
        width: 100% !important;
        max-width: 100% !important;
    }
}


@media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1023px) and (min-device-width: 767px) {
    .arrow-container {
        display: none;
    }
    .gallery div {
        max-width: 30%;
        margin: 5px 10px;
    }
    label {
        padding: .9% 2.3%;
    }
    .panel {
        padding: 6%;
    }
    .tabs h3 {
        font-size: 14px;
    }
    .tabs p{
        line-height: 1.5em;
    }
    .tabs input {
        position: absolute;
        height: 45px;
        left: 0;
        top: 10px;
    }
    .tabs {
        width: 100%;
    }
    .tabs label {
        font-size: 13px;
        padding: 0 10px;
    }
    .tabs input#tab-2 {
        left: 14.3%;
    }
    .tabs input#tab-3 {
        left: 28.7%;

    }
    .tabs input#tab-4 {
        left: 43%;

    }
    .tabs input#tab-5 {
        left: 57.2%;
    }
    .tabs input#tab-6 {
        left: 71.3%;

    }
    .tabs input#tab-7 {
        left: 85.8%;
    }
    .tab-img-sm {
        width: 48% !important;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1330px) and (min-device-width: 1024px) {
    .arrow-container {
        display: none;
    }
    .tabs h3 {
        font-size: 15px;
    }
    .tabs p{
        line-height: 1.7em;
    }
    .panels {
        min-height: 755px;
    }
    .gallery div {
        max-width: 31%;
        margin: 5px 10px;
    }
    label {
        padding: .9% 2.3%;
    }
    .panel {
        padding: 6%;
    }
    .tabs input {
        position: absolute;
    }
    .tabs {
        width: 100%;
    }
    .tabs label {
        font-size: 13px;
        padding: 0 10px;
    }
    .tabs input#tab-2 {
        left: 14.3%;
    }
    .tabs input#tab-3 {
        left: 28.7%;

    }
    .tabs input#tab-4 {
        left: 43%;

    }
    .tabs input#tab-5 {
        left: 57.2%;
    }
    .tabs input#tab-6 {
        left: 71.3%;

    }
    .tabs input#tab-7 {
        left: 85.8%;
    }
    .tabs input {
        top: 10px;
    }
}
<section class="tabs">

    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">Overview</label>

    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Design</label>

    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3"/>
    <label for="tab-3" class="tab-label-3">Build</label>

    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4"/>
    <label for="tab-4" class="tab-label-4">Interior</label>

    <input id="tab-5" type="radio" name="radio-set" class="tab-selector-5"/>
    <label for="tab-5" class="tab-label-5">Options</label>

    <input id="tab-6" type="radio" name="radio-set" class="tab-selector-6"/>
    <label for="tab-6" class="tab-label-6">Specs</label>

    <input id="tab-7" type="radio" name="radio-set" class="tab-selector-7"/>
    <label for="tab-7" class="tab-label-7">Hybrid Wing</label>

    <input id="tab-8" type="radio" name="radio-set" class="tab-selector-8"/>
    <label for="tab-8" class="tab-label-8">Gallery</label>

    <div class="content">
        <div class="content-1">
            <img class="img-main-tabs" src="http://www.lancewalker.life/images/tab-images/overview-lg-img3.jpg">
            <h2 class="h2-tabs" style="margin-top: 3rem;">BORN TO PLAY - BUILT TO RACE</h2>
            <p>It started with the simple vision of delivering the technology and performance of a competitive racing boat to the recreational sailor. The Eagle Class 53 was designed for cruising and racing in a range of
                conditions. Constructed of all-carbon and honeycomb core, this yacht is capable of safely reaching between 25-35 knots in light wind.</p>
            <p style="margin-bottom: 3rem; margin-top: 10px;">Whether you are looking for a dose of adrenaline racing around the blue waters of the Caribbean or an afternoon of ZEN sitting back in comfort in the open-air saloon, the Eagle Class 53 will take you there.</p>
            <div class="img-tabs-container">

                <img class="img-below-content-tabs" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-1.jpg">
                <img class="img-below-content-tabs" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-3.jpg">
                <img class="img-below-content-tabs" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-2.jpg">
            </div>
            <img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-1.jpg">
            <img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-3.jpg">
            <img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-2.jpg">
        </div>
        <div class="content-2">
            <img class="img-main-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-top-updated.jpg">
            <h2 style="margin-top: 3rem;">Form and Function Perfectly Balanced</h2>
            <p>Maintaining optimal performance</p>
            <p>The sweep of the sheer</p>
            <p style="margin: 10px 0">
                Key focus was placed on weight</p>
            <p style="margin-bottom: 3rem;">Bringing the Eagle Class series from design to the water is a <a class ="tabs-link" href="https://www.fastforwardcomposites.com/international-design-team-of-naval-architects-engineers-and-foil-experts">team</a> of international talent
                with decades of experience in design, naval architecture, composite boatbuilding, and foil engineering. This
                mosaic of talent has designed world-class racing boats for Oracle Racing, Luna Rossa, and Artemis Racing.</p>
            <div class="img-tabs-container">
                <img class="img-below-content-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-1.jpg">
                <img class="img-below-content-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-2.jpg">
                <img class="img-below-content-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-3.jpg">
            </div>
            <img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-1.jpg">
            <img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-2.jpg">
            <img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-3.jpg">
        </div>
        <div class="content-3">
            <img class="img-main-tabs" src="http://www.lancewalker.life/images/build/eagle-class-build-image-top.jpg">
            <h2 style="margin-top: 3rem;">Experience, Process, Quality</h2>
            <p>A highly-capable, world class catamaran – realized by an experienced, dedicated team.</p>
            <ul>
                <li>Designed by the celebrated naval architect Paul Bieker, veteran designer of multiple America’s Cup projects</li>
                <li>Built by Fast Forward Composites, in Bristol, Rhode Island, by a crew of accomplished boatbuilders and seasoned composite specialists</li>
                <li>Aerospace derived materials</li>
                <h2 style="margin-top: 30px;">Construction</h2>
                <li>Vacuum-bagged epoxy pre-preg carbon fiber skins over honeycomb and various core foams</li>
                <li>All carbon spars and rig</li>
                <li>High modulus carbon fiber rotating Hybrid Wing</li>
                <li>Pre-preg carbon C-Foils and T-rudders</li>
                <li>Assembled in our newly renovated, state-of-the art production facility. Using our strong supplier relationships, we are able to secure the best resins, adhesives and aerospace grade honeycomb core ensuring the highest quality build.</li>
            </ul>
        </div>
        <div class="content-4">
            <img class="img-main-tabs" src="https://www.lancewalker.life/images/interior/interior-main-img.jpg">
            <h2 class="tabs-h2" style="margin-top: 3rem;">Open air sophistication</h2>
            <p style="margin: 0 0 10px 0;">The Eagle Class 53 is unique in that it combines very lightweight structures with vast space on deck and great accommodations inside. Sail control lines are in the hardtop and are operated from the
                forward part of the deck, allowing a line-free area for guests. All the systems are contained in the same area, creating an ideal weight concentration and a clean interior.</p>
            <p style="margin: 0 0 10px 0;">The spacious and airy cabins in each hull have a full 6'5" of headroom. The five windows combined with a large hatch above each bunk provide ocean views, fantastic natural light, and ventilation.
                Each cabin includes a Barcelona-style chair for lounging, a generous closet, and a full-length double bed at 6'8". The wet room/heads have enough room for two people, with specialized features such as a
                custom carbon sink and lightweight Techma head. All interior components are ergonomically designed using modern and lightweight materials.</p>
            <p style="margin-bottom: 3rem;">The main saloon features a central entertainment island. The bar contains a sink, refrigerator and additional storage and can be customized to include an ice-maker and microwave.
                The island is flanked by bar stools and two luxurious leather settees.</p>
            <div class="img-tabs-container">
                <img class="img-below-content-tabs-vert" src="https://www.lancewalker.life/images/interior/interior-1-vert.jpg">
                <img class="img-below-content-tabs-vert" src="https://www.lancewalker.life/images/interior/interior-2-vert.jpg">
                <img class="img-below-content-tabs-vert" src="https://www.lancewalker.life/images/interior/interior-3-vert.jpg">
            </div>
            <img class="img-below-content-tabs-mobile" src="https://www.lancewalker.life/images/interior/interior-1-vert.jpg">
            <img class="img-below-content-tabs-mobile" src="https://www.lancewalker.life/images/interior/interior-2-vert.jpg">
            <img class="img-below-content-tabs-mobile" src="https://www.lancewalker.life/images/interior/interior-3-vert.jpg">
        </div>
        <div class="content-5">
            <img class="img-main-tabs" src="https://www.lancewalker.life/images/options/eagle-class-options-img-main.jpg">
            <h2 style="margin-top: 3rem;">Options</h2>
            <p style="margin-bottom: 3rem;">Owners have the choice of a variety of performance options, including the option of a standard rig or Hybrid Wing. The Eagle Class 53T is a turbo-charged version of the Eagle Class 53.
                Standard C-foils are replaced with carbon fiber T-foils creating a platform which foils at very low wind speeds and significantly increases the speed potential of the boat in medium to
                heavy wind conditions. The 53T also comes equipped with our fully automated foiling control system. The possibilities are endless.
            </p>

        </div>
        <div class="content-6">
            <div class="tab-img-container" style="margin-top: 0 !important; background: none !important;">
                <div class="tab-img-container-col" style="background: none !important;">
                        <h2>SPECS</h2>
                </div>
                <div class="tab-img-container-col" style="background: none !important;">
                </div>
            </div>
        </div>
        <div class="content-7">
            <!--<div class="tab-img-container">
                <img class="tab-img-sm" src="https://www.lancewalker.life/images/hybridwing/hw-brand-logo.jpg">
            </div>-->
            <h2>Hybrid-Wing</h2>
            <p>            </p><br>
            <div style="padding:56.25% 0 0 0;position:relative; opacity: 1; width: 100%; height: 100%;">
                <iframe src="https://player.vimeo.com/video/352449872?byline=0&portrait=0"
                        style="position:absolute;top:0;left:0;width:100%;height:100%;"
                        frameborder="0" allow="autoplay; fullscreen"
                        allowfullscreen></iframe></div>
            <script src="https://player.vimeo.com/api/player.js"></script>
        </div>
        <div class="content-8">
            <div class="ec-container" id="project-ec">
        </div>
    </div>
</section>

标签： javascripthtmlcss

解决方案

尝试使用百分比而不是 PX 或组合和位置：绝对。使用百分比等应用边距。可能需要稍微重新安排一些事情，但可能会奏效。组合还包括使用left，margin-left,例如，正面和负面。

推荐阅读