CSS3 Center crop image

Мне нужно сфокусировать изображения для моей отзывчивой веб-страницы Я хочу, чтобы все изображения были показаны напр. 250x250px, как на картинке нижеCSS3 Center crop image

Как я могу это сделать?

Мой результат был бы как этот https://www.dropbox.com/s/ep02ik9cq39lty9/Screenshot%202014-04-12%2017.07.31.png

источник

2014-04-12 user3526720

Используйте следующий процесс:

ширина на основе Процентное соотношение и высота для всех не img элементов
250px для ширины и высоты img элемент (ы)
display:inline-block; и text-align:center для горизонтального центрирования
125px для верхнего и нижнего края img

<!doctype html> 
 
     <html lang="en"> 
 
     <head> 
 
     <style type="text/css"> 
 
      
 
     /*Set dimensions of image in CSS */ 
 
     img { width:250px; height:250px; margin: 125px 0; } 
 
        
 
     /* Use inline-block for wrapper and placeholder */ 
 
     .placeholder, .wrapper { display: inline-block; } 
 
           
 
     /* Inline necessary to use text-align:center */ 
 
     .content { display:inline; } 
 
     
 
     /* Text align for horizontal centering */ 
 
     .container { text-align:center; } 
 
      
 
     .wrapper { width: 100%; } 
 
      
 
      </style> 
 
     
 
      <title>Vertical/Horizontal Centering Test</title> 
 
     </head> 
 
      
 
      <body> 
 
      
 
     <div class="container"> 
 
      <div class="content"> 
 
       <div class="wrapper"> 
 
        <img src="http://mozilla.com/favicon.ico" alt="test image"> 
 
       </div> 
 
      </div> 
 
      <span class="placeholder"></span> 
 
     </div> 
 
      </body> 
 
     </html>

источник

2016-02-16 16:55:53

CSS3 Center crop image

ответ

Смежные вопросы