Zentrum Bild und behalten die gleiche Höhe

Question

Wie kann ich Bild mit css nur innerhalb Elternteil div zentrieren, ohne die Originalgröße zu ändern?

.main-img { 
 
      display: block; 
 
      width: 180px; 
 
      overflow: hidden; 
 
      align-self: flex-start; 
 
     }

<div class="main-img"> 
 
    <img src="http://via.placeholder.com/300x50.png" width="1280px" height="550px" alt="main image" /> 
 
</div>

Answer 1

Way1: horizontal:

.main-img img { 
    display: block; 
    margin: auto; 
} 

vertikal:

.main-img { 
    height: 180px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.main-img img { 
    width: 200px; 
    height: 200px; 
} 

WAY2: horizontal:

.main-img { 
    /* ... other code here such as width and height ... */ 
    position: relative; 
} 
.main-img img { 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
} 

vertikal:

.main-img { 
    /* ... other code here such as width and height ... */ 
    position: relative; 
} 
.main-img img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

vertikal und horizontal:

.main-img { 
    /* ... other code here such as width and height ... */ 
    position: relative; 
} 
.main-img img { 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Answer 2

Um horizontal zentriert Ihrem Element sind Sie für margin: 0 auto suchen, wie <div> Elemente sind block-level standardmäßig (und somit müssen Sie nicht wirklich brauchen display: block):

.main-img { 
 
    margin: 0 auto; 
 
    width: 180px; 
 
    overflow: hidden; 
 
    align-self: flex-start; 
 
}

<div class="main-img"> 
 
    <img src="http://via.placeholder.com/300x50.png" width="1280px" height="550px" alt="main image" /> 
 
</div>

Vertikal Zentrierung ist ein wenig komplizierter, und es ist am einfachsten, sowohl horizontale als auch vertikale Zentrierung mit flexbox zu erreichen, die display: flex, align-items: center und justify-content: center Eigenschaftswerte verwendet. Beachten Sie, dass Sie auch eine height Eigenschaft angeben müssen:

.main-img { 
 
    height: 180px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.main-img img { 
 
    width: 140px; 
 
    height: 140px; 
 
}

<div class="main-img"> 
 
    <img src="http://via.placeholder.com/140x140.png" alt="main image" /> 
 
</div>

hoffe, das hilft! :)