-1
例：https://gyazo.com/8d717ee1a21ed49033deece5a105239d（Photoshop）。 黒=スライダー、グレー=イメージ、白=背景色が変更可能なテキストエリア。テキストとイメージの半分が互いに隣り合っています
私はこのような電話機などにも反応したいと思っていますが、ページの幅と高さの半分のイメージを撮れば、それはうまくいかないでしょう。
イメージを左側に、テキストをテキストの背景を変更可能にして、隣のコンテナ内に正確に配置しようとしています。私は左のプロパティを使ってみました：;右：;、余白、パディングは動作しません。
画像とテキストは、A3L_SloganとA3L_Catchphraseというdivの下にある必要があります。私は誰もが良い方向に私を指すことができることを願っています。あなたはそれ
body {
width: 100%;
margin: 0;
font-family: 'open sans', sans-serif;
zoom: 1;
overflow-x: hidden;
}
header {
padding: 20px 0;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
padding: 0 20px;
margin: 0 auto;
}
.logo-box {
float: left;
margin-right: 20px;
}
.logo-box a {
outline: none;
display: block;
}
.logo-box img {display: block;}
nav {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
float: right;
}
nav li {
display: inline-block;
margin-left: 25px;
height: 70px;
line-height: 70px;
transition: .5s linear;
}
nav a {
text-decoration: none;
display: block;
position: relative;
color: #868686;
text-transform: uppercase;
}
nav a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 15px;
background: #868686;
transition: width .5s linear;
}
nav a:hover:after {width: 100%;}
@media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 16px 0;
}
ul {float: none;}
nav li:first-of-type {margin-left: 0;}
}
@media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
.A3L_Slogan, .slideshow{
position: relative;
}
.slideshow{
height: 600px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 600px;
left:0;
top:0;
}
.A3L_Slogan {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.slogan_title {
font-size: 46px;
font-weight: 700;
padding: 15px;
text-transform: uppercase;
}
.slogan_catchphrase {
font-size: 30px;
font-weight: 500;
text-transform: uppercase;
}
@media only screen and (max-width: 640px) {
.slideshow{
height: 300px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 300px;
left:0;
top:0;
}
}
@media only screen and (max-width: 600px) {
.slideshow{
height: 200px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 200px;
left:0;
top:0;
}
}
@media only screen and (max-width: 480px) {
.logo {
max-width: 270px;
}
}
}<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function() {
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 4000);
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo-box">
<a href="/">
<img class="logo" src="images/logo.png">
</a>
</div>
<nav>
<ul>
<li><a href="">Forums</a></li>
<li><a href="">Rules</a></li>
<li><a href="">Monetization</a></li>
<li><a href="">Sign-up</a></li>
<li><a href="">Staff</a></li>
</ul>
</nav>
</div>
</header>
<div class="slideshow">
<div class="fadein">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg" alt="">
</div>
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
<div class="slogan_catchphrase">
The next level roleplay experience
</div>
</div>
</body>
</html>
こんにちは、私はそれを試して、それは動作していないようです。それは画像を全幅にするだけです。 A3Lスローガン部門はそれがどこにあるかにとどまらず、異なるスキルとタイトルのスローガンの下にすべきです。 – BPrepper
画像の幅を設定する必要があります。 – bhansa
応答性については、CSSの最大幅やimgの部分自体を設定するのが最善でしょうか？ – BPrepper