Chciałbym, aby mój obraz nie był rozciągnięty i nie ma pasków przewijania. Dlatego po zmniejszeniu okna przeglądarki obraz nadal ma ten sam rozmiar (ale przepełnienie jest ukryte).Posiadanie obrazu (bez pojemnika) nierozciągniętego
<img src="http://nybbledesigns.com/images/header.jpg"/>
JsFiddle: http://jsfiddle.net/6ppL9axc/
znalazłem rozwiązania z pojemników, ale muszę rozwiązanie bez.
Każdy pomysł?
spróbuj tego:
img {
position: fixed;
overflow: auto;
}<img src="http://nybbledesigns.com/images/header.jpg"/>Zrobiłem wersję tła, nadzieję, że to może pomóc.
<div></div>
div {
width:100%;height:60vh;
background-image:url("http://nybbledesigns.com/images/header.jpg");
background-repeat:no-repeat;
}
VH jest w stosunku do wysokości ekranu urządzenia tak 60vh będzie wynosić 60% w stosunku do wysokości obrazu w każdym momencie, bez względu na to, które to urządzenie :)
Spróbuj
html, body {
max-width: 100%;
overflow-x: hidden;
}
będzie wyłączyć suwakami na zawsze ~
spróbować
img {max-width:100%;}
Można to zrobić z nowym własności CSS object-fit (Currently webkit only, but soon to be supported in other browsers)
Wystarczy ustawić object-fit: cover; na img razem szerokość max-width i stałą wysokość.
Jest to w zasadzie odpowiednik zastosowania background-size:cover do obrazu tła, z tą różnicą, że stosujemy go do elementu img.
body {
margin: 0;
}
img {
object-fit: cover;
max-width: 100%;
height: 513px;
}<img src="http://nybbledesigns.com/images/header.jpg" />
można umieścić przepełnienie na ciele, ale nie sądzę, że to życzeniowe. Lub możesz ustawić obraz jako tło ciała. W przeciwnym razie myślę, że utknąłeś w kontenerze. – LinkinTED
Wolę zachować mój obraz w tagu img. – Bronzato
O ile mi wiadomo, potrzebny będzie element opakowania. – LinkinTED