Immagine centrale più grande dello schermo

Ho allegato un disegno di come appare la mia pagina. La pagina ha una larghezza di 980px e l'immagine ha una larghezza di circa 1200px. Quello che voglio ottenere è avere la pagina centrata e mostrare il più possibile l'immagine mantenendo al contempo l'immagine centrata. Ho cercato di posizionare l'immagine in modo assoluto, ma sui dispositivi mobili la pagina del browser è impostata sulla larghezza dell'immagine e il contenuto non è centrato.Immagine centrale più grande dello schermo

Fondamentalmente, potrebbero esserci schermate in cui l'intera immagine non viene mostrata all'utente ma solo quanto si adatta allo schermo.

CSS:

.page_container { 
width: 980px; 
margin: 0 auto; 
} 

.image { 
position: absolute; 
left: 0; 
right: 0; 
}

HTML:

<body> 
<div class="page_container">...</div> 
<div class="image"><img .../></div> 
<div class="page_container">...</div> 
</body>

enter image description here

fonte

2013-06-10 Andrew

Si sta utilizzando Media Queries? – Nitesh

devi usare un'immagine? puoi usare un'immagine di sfondo nel corpo e centrarla –

@NathanLee no, io non – Andrew

-1

background-size: auto;

impostare questa proprietà per l'immagine

fonte

2013-06-10 12:56:17 Aravind30790

-1

Prova questo: -

.image { 
    position: absolute; 
    left: -50%; 
    }

penso che funzionerà per le immagini più grandi ...

fonte

2013-06-10 13:07:36 SaurabhLP

si può provare questo

<div class="popup"> 
<div class="wrapper"> 
<img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg"> 
</div> 
</div>

CSS:

.popup{ 
position:fixed; 
left:50%; 
} 
.popup .wrapper{ 
position:relative; 
left:-50%; 

/*popup-styles*/ 
background-color:#fff; 
padding:10px; 
border:solid 2px #444; 
border-radius:10px; 
} 
html{background-color:#aaa;}

Esempio: jsfiddle

by Elad Shechter

fonte

2013-06-10 13:19:05

questo tipo fa ciò che voglio, tranne che non voglio che l'immagine sia corretta. – Andrew

-1

.image { posizione: assoluto; lasciato: -50%; }

fonte

2013-06-10 13:19:48 Shalim

questo lo rende più piccolo dal lato destro, mentre lo mantiene nella stessa posizione a sinistra – Andrew

.image { 
position:absolute; 
left:50%; 
margin-left:-600px; // half of image width 
}

fonte

2013-06-10 13:23:52 l2aelba

questo lo mantiene allineato a sinistra e lo rende più piccolo da destra – Andrew

Plsusethe position: relative per l'image.like questo:

<div class="page_container">...</div> 
<div class="image"><img src="http://g.hiphotos.baidu.com/album/w%3D210%3Bq%3D75/sign=3584477cf636afc30e0c386483229af9/caef76094b36acaf18169c407dd98d1000e99c93.jpg" width=1200 height=200 /></div> 
<div class="page_container">...</div>

codice css:

.page_container { 
width: 980px; 
margin: 0 auto; 
    background: orange; 
} 

.image { 
    position: relative; 
    left: 50%; 
    margin-left: -600px; 
}

il margine sinistro è uguale alla larghezza del img/2. vedere il demo.

fonte

2013-06-10 15:14:54 Airen

questo sarebbe perfetto se accorciava l'immagine sia da sinistra che il diritto e non solo da destra. – Andrew

Si può provare in questo modo:

HTML:

<div class="wrapper"> 
    <div class="image"> 
     <img src="img/img.jpg"> 
    </div> 
</div>

JS:

<script> 
$(document).ready(function() { 
    $('div.image').each(function() { 
      var imageSrc = $(this).find('img').attr('src'); 
      $(this).css('background', 'url(' + imageSrc + ') center top no-repeat'); 
    }); 
}); 
</script>

CSS:

.wrapper { 
    float: left; 
    width: 100%; 
    overflow: hidden; 
} 
.wrapper .image img { 
    visibility: hidden; 
}

fonte

2014-08-08 17:38:49 rafawhs

Immagine centrale più grande dello schermo

risposta

Problemi correlati