Центрированное изображение и размер шрифта не работает

Question

Я хочу, чтобы изображение было большого размера и по центру, оно кажется размерным и показано, что центрированное изображение все еще не работает.

HTML:

<div class="content-grid"> 
    <img src="test.jpg" /> 
</div> 

CSS:

.content-grid img{ 
    display: block; 
    margin: 0 auto; 
    font-size: 250%; 
} 

Answer 1

https://jsfiddle.net/ahmadasjad/1aedjv7s/

.content-grid img{ 
display: block; 
    margin: 0 auto; 
    height: auto; 
    /* font-size: 255%; */ 
    width: 33em; 
} 

если вам нужно больше размер, увеличьте ширину значения em столько, сколько хотите. , например, изменить width: 33em; к width: 50em;, width: 65em;

Answer 2

Удалить все другие стили, а просто установить text-align:center в контейнер.

Свойство font-size не контролирует размер изображения, используйте width и height на изображение непосредственно, если нужно, то есть img {width:300px; height:auto;}

.content-grid { 
 
    text-align: center; 
 
}

<div class="content-grid"> 
 
    <img src="//dummyimage.com/200x100"> 
 
</div>