Vorrei che la mia immagine non fosse allungata e nessuna barra di scorrimento. Pertanto, quando la finestra del browser viene ridotta, l'immagine ha ancora le stesse dimensioni (ma l'overflow è nascosto).Avere un'immagine (senza contenitore) non allungata
<img src="http://nybbledesigns.com/images/header.jpg"/>
JsFiddle: http://jsfiddle.net/6ppL9axc/
ho trovato soluzioni con contenitori ma ho bisogno di una soluzione senza.
Qualche idea?
dare una prova:
img {
position: fixed;
overflow: auto;
}<img src="http://nybbledesigns.com/images/header.jpg"/>ho fatto una versione con sfondo, spero che potrebbe aiutare.
<div></div>
div {
width:100%;height:60vh;
background-image:url("http://nybbledesigns.com/images/header.jpg");
background-repeat:no-repeat;
}
VH è relativo all'altezza schermo del dispositivo così 60vh sarà 60% rispetto all'altezza schermo in ogni momento, non importa quale dispositivo :)
Prova
html, body {
max-width: 100%;
overflow-x: hidden;
}
sarà disattivare le barre di scorrimento per sempre ~
provare questo
img {max-width:100%;}
Questo può essere fatto con la nuova proprietà CSS object-fit (Currently webkit only, but soon to be supported in other browsers)
Basta impostare object-fit: cover; sul img insieme larghezza max-width e altezza fissa.
Questo è praticamente l'equivalente di applicare background-size:cover a un'immagine di sfondo, eccetto che qui lo applichiamo a un elemento img.
body {
margin: 0;
}
img {
object-fit: cover;
max-width: 100%;
height: 513px;
}<img src="http://nybbledesigns.com/images/header.jpg" />
Si può mettere l'overflow sul corpo, ma non credo che sia un pio desiderio. Oppure puoi impostare l'immagine come sfondo del corpo. Altrimenti, penso che tu sia bloccato nella soluzione container. – LinkinTED
Preferisco mantenere la mia immagine nel tag img – Bronzato
Per quanto ne so, avrai bisogno di un elemento wrapper. – LinkinTED