0
私が使っているこのレイアウトには、赤いイメージがiPhone内にあるイメージスライダがあります。今のところ、私が試した方法のどれも、max-width: 100%; height: auto;のように助けられていないので、私は立ち往生しています。この問題はGIFとソースで以下に見られます。この問題は、iPhone 5や4などのモバイルデバイスでも発生します。コンテナ内でイメージを垂直方向に縮尺させる
イメージが電話の内部の最大幅を持つようにSVGで内部コンテナを設定できる方法はありますかSVGと同じように拡張することができますか？
*,
:after,
:before {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main,
section {
display: block;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
outline-width: 0;
}
h1 {
font-size: 2em;
margin: .67em 0;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
.btn::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
.btn:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
img {
width: 100%;
}
svg {
max-height: 100%;
max-width: 100%;
}
@media screen and (max-width:800px) {
.hide-on-medium {
display: none!important;
}
}
.p1 {
padding: 1rem;
}
.pt1 {
padding-top: 1rem;
}
.pb1 {
padding-bottom: 1rem;
}
.plr1 {
padding-left: 1rem;
padding-right: 1rem;
}
.mt2 {
margin-top: 2rem;
}
.mb0 {
margin-bottom: 0!important;
}
.mb1 {
margin-bottom: 1rem;
}
.column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
height: auto;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
@media screen and (max-width:480px) {
.column {
min-width: 100%;
}
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
height: auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media screen and (max-width:480px) {
.row>.column {
width: 100%!important;
}
}
.w50 {
width: 50%;
}
.w75 {
width: 75%;
}
.w90 {
width: 90%;
}
.w100 {
width: 100%;
}
.vh100 {
height: 100vh;
}
.h75 {
height: 75%;
}
.bg-white {
background-color: #fff;
}
.absolute {
position: absolute;
}
.center {
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.depth-1 {
z-index: 100;
}
.depth-2 {
z-index: 200;
}
@font-face {
font-family: Office Code Pro;
src: url(../fonts/OfficeCodePro-Regular.woff);
}
::-moz-selection {
background: #1e1e1e;
color: #fff84d;
}
::selection {
background: #1e1e1e;
color: #fff84d;
}
h1,
h3,
h4 {
font-weight: 400;
margin-bottom: 1rem;
}
h1 {
font-size: 2.25rem;
line-height: 1.2;
}
h3 {
font-size: 1.5rem;
line-height: 1.4;
}
h4 {
font-size: 1.25rem;
line-height: 1.5;
}
body {
font-size: 1rem;
}
body {
background-color: #fff;
color: #1e1e1e;
font-family: Open Sans,Helvetica,sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
-webkit-transition: color .2s;
transition: color .2s;
cursor: pointer;
}
a,
a:hover {
color: #fff84d;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
ul {
list-style-type: disc;
}
input[type=color]::-webkit-color-swatch {
border: none!important;
}
input[type=color]::-webkit-color-swatch-wrapper {
padding: 0!important;
}
::-webkit-calendar-picker-indicator,
::-webkit-calendar-picker-indicator:hover {
background: transparent;
color: #fff84d;
padding: 0;
padding-left: 1rem;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
body {
color: #1e1e1e;
}
p.lead {
font-size: 1.2rem;
font-weight: 600;
}
@media screen and (max-width:800px) {
p.lead {
padding-top: 2rem;
font-size: 1.4rem;
}
}
.phone {
background: #1e1e1e;
position: fixed;
right: 0;
}
@media screen and (max-width:800px) {
.phone {
position: static;
width: 100%;
height: 100vh;
}
}
.info {
position: absolute;
left: 0;
}
@media screen and (max-width:800px) {
.info {
position: static;
width: 100%;
}
}
.phoneContainer {
position: relative;
height: 80vh;
max-height: 500px;
}
.slider ul>li img {
margin-top: 70px;
max-width: 100%;
height: auto;
}
.action {
max-height: 80px;
}
.quote {
background: #fff84d;
position: relative;
}
.quote>a {
color: #222;
font-size: 1.75rem;
}
h1.highlight {
display: inline-block;
position: relative;
z-index: 1;
}
h1.highlight:before {
display: block;
position: absolute;
top: 26%;
width: 110%;
height: 45%;
margin-left: -15px;
background: rgba(255,248,77,.8);
content: "";
z-index: -1;
}
h3.highlight {
display: inline-block;
position: relative;
z-index: 1;
}
h3.highlight:before {
display: block;
position: absolute;
top: 60%;
width: 100%;
height: 45%;
margin-left: -1px;
background: rgba(255,248,77,.5);
content: "";
z-index: -1;
}
h3.highlight:before:hover {
background: #fff84d;
}
ul.offer {
margin-bottom: 1rem;
}
ul.offer li {
list-style: none;
}
ul.offer li>h4 {
display: inline-block;
padding: 8px 12px;
}
ul.offer li>svg {
display: inline-block;
vertical-align: middle;
}
.arrow {
position: fixed;
margin: auto;
bottom: 40px;
left: 0;
right: 0;
width: 24px;
height: 14px;
font-size: 40px;
line-height: 40px;
-webkit-animation: q 2s infinite ease-in-out;
animation: q 2s infinite ease-in-out;
}
.arrow svg g {
stroke: #fff84d;
}
@-webkit-keyframes q {
0%, 20%, 60%, to {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
}
}
@keyframes q {
0%, 20%, 60%, to {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
}
}
.logoContainer.for-mobile {
display: none;
}
@media screen and (max-width:800px) {
.logoContainer.for-mobile {
display: block;
width: 80%;
max-width: 300px;
margin: 2rem auto 0;
}
}
@media screen and (max-width:480px) {
.logoContainer.for-mobile {
width: 80%;
display: block;
max-width: 300px;
margin: 2rem auto 0;
}
}
.phonePosition {
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (max-width:800px) {
.phonePosition {
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: start;
align-items: start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
}
}
@media screen and (max-width:480px) {
.phonePosition {
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: start;
align-items: start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
}
}
svg.logo {
width: 300px;
}
@media screen and (max-width:800px) {
svg.logo path {
fill: #fff84d!important;
}
}
.imageContainer {
width: 200px;
margin: 0 auto;
}
.imageContainer img {
width: 100%;
}
svg.logo path {
fill: #1e1e1e;
}<main class="row space-between">
<section class="phone column w50 vh100">
<div class="logoContainer for-mobile"></div>
<div class="column w75 pt1 pb1 phonePosition">
<div class="w100 center middle">
<div class="phoneContainer center depth-1"><svg class="absolute depth-1 p1" preserveAspectRatio="xMidYMidmeet" width="100%" viewbox="0 0 497 1014" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Apple iPhone 6</title><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path id="Apple-iPhone-6" d="M494,290 L495.501424,290 C496.329065,290 497,289.328711 497,288.501847 L497,216.498153 C497,215.670746 496.33497,215 495.501424,215 L494,215 L494,74.9994014 C494,33.5783758 460.420697,0 418.993513,0 L78.0064869,0 C36.5815481,0 3,33.5749963 3,74.9994014 L3,128 L1.49857602,128 C0.670935336,128 0,128.677424 0,129.507836 L0,167.492164 C0,168.324919 0.665029764,169 1.49857602,169 L3,169 L3,215 L1.49857602,215 C0.670935336,215 0,215.671289 0,216.498153 L0,288.501847 C0,289.329254 0.665029764,290 1.49857602,290 L3,290 L3,307 L1.49857602,307 C0.670935336,307 0,307.671289 0,308.498153 L0,380.501847 C0,381.329254 0.665029764,382 1.49857602,382 L3,382 L3,939.000599 C3,980.421624 36.5793027,1014 78.0064869,1014 L418.993513,1014 C460.418452,1014 494,980.425004 494,939.000599 L494,290 Z M33,123 L33,889 L464,889 L464,123 L33,123 Z M248,983 C268.98682,983 286,965.98682 286,945 C286,924.01318 268.98682,907 248,907 C227.01318,907 210,924.01318 210,945 C210,965.98682 227.01318,983 248,983 Z M248,979 C266.777681,979 282,963.777681 282,945 C282,926.222319 266.777681,911 248,911 C229.222319,911 214,926.222319 214,945 C214,963.777681 229.222319,979 248,979 Z M170,72 C174.418278,72 178,68.418278 178,64 C178,59.581722 174.418278,56 170,56 C165.581722,56 162,59.581722 162,64 C162,68.418278 165.581722,72 170,72 Z M249,37 C251.761424,37 254,34.7614237 254,32 C254,29.2385763 251.761424,27 249,27 C246.238576,27 244,29.2385763 244,32 C244,34.7614237 246.238576,37 249,37 Z M212.994583,60 C210.788436,60 209,61.7953562 209,64 C209,66.209139 210.78308,68 212.994583,68 L285.005417,68 C287.211564,68 289,66.2046438 289,64 C289,61.790861 287.21692,60 285.005417,60 L212.994583,60 Z" fill="#FFFFFF"></path></g></svg>
<div
class="imageContainer center">
<div class="slider">
<ul>
<li><img src="http://i.imgur.com/0uis27M.jpg"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="arrow depth-1"><svg width="24px" height="14px" viewbox="0 0 12 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Path 3088</title><defs></defs><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="Music-4" transform="translate(-130.000000, -950.000000)" stroke-width="1.5" stroke="#333122"><polyline id="Path-3088" points="131.25 951.574381 135.960658 956 140.75 951.5"></polyline></g></g></svg></div>
<div class="action row space-between w100 hide-on-medium">
<div class="quote column w50 center"><a class="center" href="#" target="_blank">Block Text</a></div>
</div>
</section>
<section class="info column w50 vh100 center bg-white depth-2">
<div class="column w90 h75 plr1 pb1 center">
<div class="vh100 top-center" style="border: 1px solid blue;">
</div>
</div>
</section>
</main>EDIT：デモで使用される画像がプレースホルダです。実際のJPGは最終プロジェクトで使用されます。
これは、CSSの3000行以上です！誰もそのすべてのコードを通過したいとは思わない。 –
私のせいです。私は未使用のものを刈ることができます！ – privateer35
ソースコードを更新しました！ – privateer35