Jak ustawić szerokość i wysokość obrazu bez rozciągania go?

Jeśli mam:

#logo {
    width: 400px;
    height: 200px;
}

następnie

<img id="logo" src="logo.jpg"/>

rozciągnie się, aby wypełnić tę przestrzeń. Chcę, aby obraz zachował ten sam rozmiar, ale aby zajmował tyle miejsca w DOM. Czy muszę dodać kapsułkowanie <div>lub <span>? Nienawidzę dodawać znaczników do stylizacji.

Tak, potrzebujesz hermetyzującego div:

<div id="logo"><img src="logo.jpg"></div>

z czymś takim jak:

#logo { height: 100px; width: 200px; overflow: hidden; }

Inne rozwiązania (dopełnienie, margines) są bardziej uciążliwe (trzeba obliczyć odpowiednią wartość na podstawie wymiarów obrazka), ale też nie pozwalają efektywnie na to, aby pojemnik był mniejszy niż obraz.

Powyższe można również znacznie łatwiej dostosować do różnych układów. Na przykład, jeśli chcesz, aby obraz w prawym dolnym rogu:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

Odpowiedź 2017

Dopasowanie obiektów CSS działa we wszystkich obecnych przeglądarkach. Pozwala to imgna powiększenie elementu bez rozciągania obrazu.

Możesz dodać object-fit: cover;do swojego CSS.

Załaduj obraz jako tło dla div.

Zamiast:

<img id='logo' src='picture.jpg'>

zrobić

<div id='logo' style='background:url(picture.jpg)'></div>

Wszystkie przeglądarki przycinają część obrazu, która nie pasuje.
Ma to kilka zalet w porównaniu z zawijaniem elementu, którego przepełnienie jest ukryte:

1. Bez dodatkowych znaczników. Element div po prostu zastępuje plik img.
2. Łatwo wyśrodkuj lub ustaw obraz na inne przesunięcie. na przykład.url(pic) center top;
3. Powtórz obraz, gdy będzie wystarczająco mały. (OK, nie wiem, dlaczego chcesz tego)
4. Ustaw kolor bg w tej samej instrukcji, łatwo zastosuj ten sam obraz do wielu elementów i wszystkiego, co dotyczy obrazów bg.

Aktualizacja: ta odpowiedź pochodzi sprzed dopasowania do obiektu; powinieneś teraz prawdopodobnie użyć dopasowania obiektu / pozycji obiektu.

Nadal jest przydatny w starszych przeglądarkach, dla dodatkowych właściwości (takich jak powtarzanie tła) i dla przypadków brzegowych (na przykład obejście błędów Chrome z flexboxem i pozycją obiektu oraz problemy FF (dawniej?) Z grid + autoheight + object- Dopasowanie. Wrapper div w grid / flexbox często daje ... nieintuicyjne wyniki).

Dopasowanie obiektów CSS3

Nie jestem pewien, jak daleko zostało zaimplementowane przez webkit, IE i firefox. Ale Opera działa jak magia

object-fitdziała z zawartością SVG, ale ten sam efekt można również osiągnąć, ustawiając preserveAspectRatio=""atrybut w samym SVG.

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

Demo Chrisa Millsa jest tutaj http://dev.opera.com/articles/view/css3-object-fit-object-position/

#logo {
    width: 400px;
    height: 200px;

    /*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
    object-fit:scale-down;
}

Utwórz element DIV i nadaj mu klasę. Następnie wrzuć do niego zdjęcie.

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

Ustaw rozmiar swojego div i uczyń go względnym.

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

następnie nadaj styl swojemu wizerunkowi

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

Mam nadzieję, że to pomoże

Możesz użyć jak poniżej:

.width100 {
  max-width: 100px;
  height: 100px;
  width: auto;
  border: solid red;
}

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

Czy muszę dodać enkapsulujący element <div> lub <span>?

Myśle że robisz. Jedyne, co przychodzi na myśl, to wypełnienie, ale w tym celu musiałbyś wcześniej znać wymiary obrazu.

możesz spróbować ustawić dopełnienie zamiast wysokości / szerokości.

Przychodzi mi do głowy rozciągnięcie szerokości lub wysokości i zmiana rozmiaru w proporcjach. Po bokach będzie trochę białej przestrzeni. Coś w rodzaju tego, jak szeroki ekran wyświetla rozdzielczość 1024x768.

Jeśli używanie flexboksa jest dla Ciebie właściwą opcją (nie musisz wspierać starych przeglądarek), sprawdź moją drugą odpowiedź tutaj (która prawdopodobnie jest duplikatem tej):

Zasadniczo musisz owinąć swój tag img w element div, a Twój css wyglądałby tak:

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 400px; height: 200px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

To dość stare pytanie, ale miałem dokładnie ten sam irytujący problem, w którym wszystko działało dobrze dla Chrome / Edge (z właściwością dopasowania do obiektu), ale ta sama właściwość css nie działała w IE11 (ponieważ jest nieobsługiwana w IE11), skończyło się używając elementu "figure" HTML5, który rozwiązał wszystkie moje problemy.

Osobiście nie użyłem zewnętrznego znacznika DIV, ponieważ w moim przypadku nie pomogło, więc uniknąłem zewnętrznego znacznika DIV i po prostu zastąpiłem elementem „figure”.

Poniższy kod wymusza ładną redukcję / skalowanie obrazu (bez zmiany oryginalnego współczynnika proporcji).

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

i klasy css:

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}