出现问题的页面： https://www.fastforwardcomposites.com/foiling-luxury-catamaran-eagle-class
我的客户端仅在Safari或Mac OS / Macbook上遇到过拉伸图像。我没有Mac，因此无法测试原因或进行修复。我想知道是否可以做一些适合我代码的事情来防止图像拉伸，同时保持图片的纵横比并在所有屏幕尺寸上正确缩放。我将宽度设置为％，将高度设置为“自动”。有问题的代码有点长，因为它位于一个较大的选项卡式内容区域内，但是您可以放心地假设在Mac上，我设置为响应式的任何图像在Mac上的拉伸效果都很差（您可以忽略“图库”标签，效果很好）。
在Safari上调整屏幕大小而无需使用设置px值的情况下，是否有任何方法可以将图像设置为可响应并迅速缩小以适合容器的大小？还是我唯一的选择是将图像设置为每个可能的屏幕尺寸都指定为特定的PX高度和宽度？我显然想避免这种情况，因为图像已经可以响应并且在所有其他浏览器和OS上都可以很好地调整大小。谢谢大家！
/* ======================================================================== *
* * * * * * * * * * * * * * * * * * 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>
答案 0 :(得分：0)
尝试使用百分比而不是PX或组合和位置进行实验：绝对。使用百分比等应用边距。可能必须稍微重新排列，但可能会起作用。组合还包括使用left和margin-left,，例如正数和负数。