Увеличьте ширину изображения до его оригинала, внутри чувствительного контейнера DIV

У меня есть контейнер <div>, который занимает 80% экрана (отзывчивая страница). Внутри этого <div> Я хочу показать изображение размером 400 x 400 (в пикселях).Увеличьте ширину изображения до его оригинала, внутри чувствительного контейнера DIV

Моя цель:

Экран увеличивается ширина: Ширина по <div> «s будет увеличиваться. Ширина изображения увеличится максимум до 400 пикселей.
Ширина экрана уменьшается: ширина <div> будет уменьшаться. Ширина изображения начнет уменьшаться, если ширина экрана меньше 400 пикселей.

Это мой JS Bin.

Любая идея?

источник

2016-09-29 Billal BEGUERADJ

http://jsbin.com/nixisacoye/1/edit?html,css,output see this –

Попробуйте это. http://jsbin.com/zoneqipufa/1/edit?html,css,output –

Все ответы и комментарии верны. Всем спасибо. –

Вы можете просто установить heigth и ширину до 100% от вашего img:

.wrapper { 
 
    width: 90%; 
 
    height: 400px; 
 
    border: 1px solid blue; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="wrapper"> 
 
    <img src= "https://s14.postimg.org/4nu4hmvyp/8222.jpg" style="width: 100%; height: 100%; max-width: 400px;"> 
 
    </div> 
 
</body> 
 
</html>

источник

2016-09-29 13:00:52 Alessandro

Необходимо указать img, чтобы принять 100% от ширины его родительского с width: 100%. max-width будет предотвратить расширение над 400px:

.wrapper { 
 
    width: 90%; 
 
    height: 400px; 
 
    border: 1px solid blue; 
 
} 
 

 
.wrapper img { 
 
    width: 100%; 
 
    max-width: 400px;

<div class="wrapper"> 
 
    <img src= "https://s14.postimg.org/4nu4hmvyp/8222.jpg"> 
 
    </div>

источник

2016-09-29 12:55:56 Turnip

Попробуйте это (поддержка IE6):

.wrapper { 
    width: 90%; 
    height: 400px; 
    border: 1px solid blue; 
} 

.wrapper img { 
    width: 100%; 
    max-width: 400px; 
    width: expression(this.offsetWidth > 400 ? "400px" : "auto"); 
}

источник

2016-09-29 12:56:00

Увеличьте ширину изображения до его оригинала, внутри чувствительного контейнера DIV

ответ

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