0

Como ven en la imagen tengo una etiqueta IMG, pero lo que necesito yo es que abarque todo la pantalla.

Estuve agregándoles las siguientes style css y sucedia esto:

mis intentos fueron estos :

  • WIDTH:100% - problema: se distorcionada y se veia muy alargada
  • display:block - se alargaba la imagen mucho y no se veia bien.
  • Agregarla en un header y alargarla pero mi problema es que necesitaba que esa imagen me mande a otra pagina, estuve viendo un codigo que se podia hacero eso, pero quiero saber si no existe otra forma de posicionar la imagen completa en la pantalla sin que distorcione cuando llege a version movil.

Mi codigo:

<!DOCTYPE html>
<html>
<head>
	<title>Rosa Susana</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/estilos.css">
	<link rel="icon" type="image/png" href="Logo para web.svg" />
  <style type="text/css">
  
  body{
    margin:0;
    padding:0;
    background:#000000;
    background-attachment:fixed;
    background-size:100% 100%;
    border:3px solid orange;
    left:10px;
    padding-top:10%;
    padding-left:3%;
/*border:1px solid #FFFF00; 

}

  #iniciar{
    text-decoration:none;
    color:black;
}
  </style>
</head>
<body>
<br><br><br><br>
<br><br><br>
<br><br>
<center>
<div class="container">
    <a href="inicio.html">
<img class="img-responsive" src="inicio.jpg" >

</div>
<br><br><br>
<br><br><br>
<center>
<a href="https://www.facebook.com/Rancho-Rosa-Susana-193044927891849/
" class="btn btn-primary">
    <span class="fa fa-facebook"></span> Facebook
  </a><br><br>
   <a style="background:red;border:none;" href="https://www.youtube.com/channel/UCB41yyo-wrldZQchu_tM3dA" class="btn btn-primary">
    <span class="fa fa-youtube"></span>  Youtube
  </a><br>
</a><br>
<br><br><br><br>
<br><br>

</body>
</html>

introducir la descripción de la imagen aquí

1 respuesta 1

4

Espero esta entendiendo bien tu pregunta y lo que estas buscando aprece ser un background fullscreen reponsive.

Pues tengo un ejemplo de código, para tu HTML seria el siguiente

html,
body {
  height: 100%;
}

body {
  background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #999;
}

div,
body {
  margin: 0;
  padding: 0;
  font-family: exo, sans-serif;
}

.wrapper {
  height: 100%;
  width: 100%;
}

.message {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 45%;
  bottom: 0;
  display: block;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.5em;
}
<link href='https://fonts.googleapis.com/css?family=Exo:400,900' rel='stylesheet' type='text/css'>
<div class="wrapper">
  <div class="message">
    <h1>Responsive background</h1>
    <p>With thanks to http://sixrevisions.com/css/responsive-background-image/ and 500px</p>
  </div>
</div>

Vista compilada

Al momento de compilarlo el resultado no distorsiona las dimensiones dela imagen es decir no se vera alargada ni 'achatada'

1
  • 1
    Solución válida. Sin embargo, yo iría en primer lugar por la resolución de la imagen. Si la resolución es demasiado baja y la ponemos como fondo del body, imagina como se vería en resoluciones de pantalla muy altas.
    – gugadev
    Commented el 15 jul. 2017 a las 14:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.