Pracuję na stronie, która używa Bootstrap. Pracuję nad tym, aby ta witryna działała zarówno na przeglądarkach stacjonarnych, jak i mobilnych. Wszystko działa, z wyjątkiem rozmiaru mojego obrazu banera.
Mam obraz o wymiarach 640x480. Mam taki obraz zdefiniowany w ten sposób:
<img alt="My Picture" src="/images//wwwroot/img/banner.jpg" style="height: auto; max-height:320px; max-width: 100%;" />
Na stronach mobilnych obraz wygląda tak, jak chcę. Jednak na pulpicie obraz ma tylko 320 pikseli szerokości. Jednak na pulpicie chcę, aby obraz był tak szeroki, jak to możliwe. Zasadniczo chcę przyciąć prawą część.
Czy można to zrobić za pomocą CSS?
Dzięki!
Odpowiedzi:
0 dla odpowiedzi № 1- Trzymaj swój CSS w klasie.
- Jeśli użycie HTML5 usunie zbędne
/ - Zmień wysokość maks. Na minimalną.
- Zmień swoją standardową szerokość: na automatyczną, zmieniając cię
CSS:
.imageFun {
height: auto;
min-height:320px;
width:100%;
/* this is actually no longer needed but kept for posterity */
max-width: 100%;
}
HTML:
<img alt="My Picture" src="/images//wwwroot/img/banner.jpg" class="imageFun">
0 dla odpowiedzi nr 2
Użyj zapytania o media, aby wycelować plik img w pliku css:
@media only screen and (min-width : 320px) {
img {
width:100%!important;
}
}
To powinno działać zmieniając min-width na swój rozmiar pulpitu.
Więcej informacji tutaj
0 dla odpowiedzi № 3
na twitter-bootstrap możesz użyć div z responsywną szerokością klasy:
<div class="col-md-12 col-sm-12 col-xs-12">
<img alt="My Picture"
src="/images//wwwroot/img/banner.jpg"
style="height: auto; width: 100%;"
/>
</div>
Gdzie wartość 12 to scala szerokości na pasku startowym siatki. Proszę spójrz na : https://getbootstrap.com/examples/grid/
Mam nadzieję, że tego chcesz
0 dla odpowiedzi nr 4
Używasz Booststrap, więc usuń stylizację i dodaj
class="img-responsive col-xs-12
To naprawi to.