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

Question

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

我的客户端仅在Safari或Mac OS/Macbook上遇到了拉伸图像。我无法测试原因，也无法修复它，因为我没有Mac。想知道是否有什么我可以做的事情，以防止图像拉伸，同时保持图片的纵横比，并在所有屏幕尺寸上正确地放大和缩小。我已经将宽度设置为%，高度设置为"auto“。这段代码有点长，因为它放在一个大的标签内容区域中，但你可以放心地假设，我在标签中响应的任何图像在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>

​

Answer 1

尝试使用percent而不是PX或它们的组合和position:absolute。使用百分比等应用边距。可能需要稍微重新安排，但可能会起作用。组合还包括使用left和margin-left,，例如，正和负。