самозагрузки 3: Как масштабировать центрированное изображение

У меня есть следующий HTML-страница/CSS, успешно центрирует файл изображения в точной середине страницы Bootstrap 3:самозагрузки 3: Как масштабировать центрированное изображение

<head> 
     <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet"> 
     <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="splash.css" media="screen" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> 
</head> 

<html> 

<style> 

html, body{ 
    height: 100%; 
    margin: 0; 
    padding: 0 0; 
    background-color: #D1E5EE; 
} 

.container-fluid{ 
    height:100%; 
    display:table; 
    width:100%; 
    padding-right:0; 
    padding-left: 0 

} 

.row-fluid{ 
    height:100%; 
    display:table-cell; 
    vertical-align: middle; 
    text-align: center; 
    width:100% 
} 

</style> 

<body> 
    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div>     
       <img src="images/splash.svg"> 
      </div> 
     </div> 
    </div> 
</body> 


</html>

То, что я хотел бы быть способный сделать, используя CSS, также иметь масштаб изображения в зависимости от размера браузера.

Я попытался добавить что-то вроде

.splash-image{ 
    height: 80%; 
    width: 80%; 
}

, а затем добавить splash-image класс к <img> тега, но он толкает изображение вправо по какой-то причине, а затем своего рода весы в Hůrky-прерывистый вид пути.

Есть ли способ настроить код выше, чтобы изображение масштабировалось при изменении размера окна браузера?

источник

2013-08-07 fox

думаю ваш ищет макс-ширина: 100%; хотя я уверен, что это уже определено в фреймворке bootstrap .. Я бы, вероятно, избавился от .splash-образа, а если бы вы только посмотрели на масштаб изображения – Richlewis

, я понял это; Я установил 'img {height: 50%; width: 50%;} 'и это сделало трюк. – fox

oh, и я добавил 'max-height' и' max-width' в родительский div. – fox

Почему вы не используете абсолютное позиционирование? Вы можете использовать «положение: относительное» на теле (или в контейнере, в котором вы хотите, чтобы ваше изображение было в центре), и «положение: абсолютное» с «сверху: 10%, снизу: 10%, справа: 10%, слева: 10 %». я хотел бы сделать что-то вроде этого:

HTML:

<body> 
    <div class="container-fluid"> 
     <img class="splash-image" src="images/splash.svg"> 
    </div> 
</body>

CSS:

body{/* your body style*/} 

.container-fluid { 
    /* your container style */ 
    position: relative; 
} 

.splash-image { 
    position: absolute; 
    top: 10%; 
    bottom: 10%; 
    left: 10%; 
    right: 10%; 
}

источник

2013-08-07 08:35:58

самозагрузки 3: Как масштабировать центрированное изображение

ответ

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