Jak sprawić, aby obraz reagował za pomocą programu startowego bez zajmowania całej szerokości podziału?

Question

Każdy, kto używał programu startowego twitter, wie, że zdjęcie można uaktywnić za pomocą klasy img-responsive w znaczniku html img. Jednak te obrazy zajmują 100% szerokości podziału.

Jak mogę sprawić, aby obraz reagował, zachowując pierwotną szerokość?

Answer 1

Możesz umieścić obraz w opakowaniu i nadać mu szerokość, jaką ma mieć obraz. HTML

<div class="imgwrapper"> 
    <img src="img.jpg" class="img-responsive"> 
</div> 

CSS

.imgwrapper { 
    width: 80%; 
} 

Powyższa teoretycznie powinien dokonać imgwrapper 80% szerokości rodzica-elementu, a img-responsive -class na zdjęcie wypełni całe opakowanie.

Jeśli to nie rozwiąże problemu, czy możesz wyjaśnić nieco lepiej, co masz na myśli: keep original width, but make it responsive? Ponieważ ustawienie go w trybie responsywnym spowoduje zmianę rozmiaru obrazu, co oznacza, że ​​nie będzie mieć oryginalnej szerokości.

Answer 2

Klasa .img-responsive dotyczy max-width: 100%; i height: auto; do obrazu, więc jeśli chcesz zachować swoją pierwotną szerokość wyraźnie trzeba ustawić szerokość obrazu za pomocą atrybutu szerokość znacznika img.

Answer 3

Powinieneś mieć opakowanie wokół obrazu określające rzeczywisty rozmiar obiektu macierzystego, który mógłby zostać użyty do umieszczenia tego obrazu. Będzie powiązany z div rodzica. Następnie zastosuj .img-reagujące na obraz. Spowoduje to, że obraz będzie miał taką samą szerokość jak opakowanie.

HTML

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

CSS

.wrapper { 
    width: 50%; 
} 

Jeśli chcesz zachować oryginalny rozmiar (nie zostanie zmieniony, aby mieć mały rozmiar, ale nigdy więcej), należy również dodać a max-width, który będzie musiał odpowiadać oryginalnemu rozmiarowi obrazu. Spowoduje to nadpisanie oryginalnej wartości 100%

.wrapper img { 
    max-width: 280px; 
}