Estoy intentando hacer una web 100% responsive pero tengo problemas a insertar ciertos objetos... una imagen, por ejemplo, me rompe todo el diseño. Intento hacerla al completo con flexbox, asi que tampoco se exactamente si es el floxbox el que da problemas con el ancho de la imagen.
El alto lo he ajustado al alto del dispositivo para que no haga scroll, pero como ya he dicho el problema me lo da el ancho. Me gustaria que cortase la imagen, sin embargo, solo la corta en el left, pero no en el right. Aqui os dejo el HTML y el CSS.
Y gracias desde ya!
Código HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Cymothoa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width height=device-height, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Una web para navegar, descubrir y disfrutar.">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
<link rel="stylesheet" href="temas/rijido/main.css">
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<header id="header">
<nav>
<article class="flexbox">
<a class="box" href="http://www.cymothoa.org">main</a>
<a class="box" href="http://www.cymothoa.org">secret</a>
<a class="box" href="http://www.cymothoa.org">about</a>
</article>
</nav>
</header>
<section>
<article class="flexbox2">
<img src="pic/fondo.png" style="height: 94vh;">
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<!--Manto-->
</body>
</html>
Código HTML:
body {
width: 100%;
margin: 0px;
padding: 0px;
background-color: #2B2A2D;
}
/*NAV*/
.flexbox{
background-color: #4F4E4E;
/*-webkit-box-shadow: 0px 2px 14px 4px rgba(79,78,78,1);
-moz-box-shadow: 0px 2px 14px 4px rgba(79,78,78,1);
box-shadow: 0px 2px 14px 4px rgba(79,78,78,1);*/
margin: 0%;
padding: 0%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
/*webkit*/
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: center;
-webkit-align-items: center;
/*ms*/
display: -ms-flex;
-ms-flex-direction: row;
-ms-flex-wrap: nowrap;
-ms-justify-content: center;
-ms-align-items: center;
}
.flexbox > a{
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-grow: 1;
text-align: center;
margin-top: 0px;
margin-bottom: 8px;
padding-bottom: 6px;
text-decoration:none;
}
.box{
list-style-type: none;/*puntito*/
/*General*/
padding: 4px;
margin: 4px;
background-color: #5F5F5F;
color: white;
font-family: 'Ubuntu Mono';
text-shadow: 0px 0px 26px rgba(22, 22, 22, 1);
/*Borde*/
border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
-webkit-border-radius: 0px 0px 6px 6px;
-ms-border-radius: 0px 0px 6px 6px;
border: 0px solid #000000;
/*Flex*/
flex: 1;
transition-duration: 1.4s;
-webkit-flex: 1;
-webkit-transition-duration: 1.4s;
-o-flex: 1;
-o-transition-duration: 1.4s;
-ms-flex: 1;
-ms-transition-duration: 1.4s;
}
.box:hover{
flex: 1.1;
transition-duration: 1.4s;
-webkit-flex: 1.2;
-webkit-transition-duration: 1.4s;
-o-flex: 1.2;
-o-transition-duration: 1.4s;
-ms-flex: 1.2;
-ms-transition-duration: 1.4s;
}
/*CUERPO*/
.flexbox2{
background-color: #2B2A2D;
margin: 0%;
padding: 0%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
/*webkit*/
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: center;
-webkit-align-items: center;
/*ms*/
display: -ms-flex;
-ms-flex-direction: row;
-ms-flex-wrap: nowrap;
-ms-justify-content: center;
-ms-align-items: center;
}
.backcyn{
}
/*BOTON*/
.boton {
background-color: #ffffff;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 0px 0px 0px 11px #ffaf00;
-webkit-box-shadow: 0px 0px 0px 11px #ffaf00;
box-shadow: 0px 0px 0px 11px #ffaf00;
/*IE 7 AND 8 DO NOT SUPPORT SPREAD PROPERTY OF SHADOWS*/
/*flexbox*/
display: flex;
flex-wrap: wrap-reverse;
justify-content: center;
align-items: center;
align-content: center;
}
PD: No estoy seguro si hay que ajustar la imagen o el div que lo contiene.