Как сделать масштаб изображения пропорционально изменению размера окна веб-браузера?

Question

Как сделать масштаб изображения пропорционально изменению размера окна веб-браузера?

0

Моя проблема следующая. Когда я изменяю размер окна браузера, среднее изображение падает ниже 2 других, которые находятся рядом с ним.

Изображение его во время работы: изображение рабочего сайта
Изображение его при уменьшении браузера: поврежденный образ веб-сайта
То же самое происходит с меньшими мониторами, и мой код ниже:

HTML: HTML-код

CSS:

.content {
padding-top:50px;
text-align: center;
}
.samp{
float: left;
width: 188px;
height: 356px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 320px;
}
.multiv{
float: left;
width: 247px;
height: 431px;
margin-top: 100px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 60px;
}
.minecraft{
float: right;
width: 234px;
height: 327px;
margin-top: 73px;
margin-right: 280px;
margin-bottom: 5px;
margin-left: 0px;
}

Есть 3 изображения, которые я просто хочу, чтобы они остались в одном месте, которое находится в средней области, и измените размер с помощью браузера.

Mr.Blue 16 фев. 2014, в 00:34

Источник

0

Эй, трудно дать точное решение без рабочего примера, но вам нужно расположить каждое из ваших изображений с относительным процентом ширины обертки
brendosthoughts 15 фев. 2014, в 22:44

Теги:

html

css

css3

3 ответа

Ещё вопросы

Эй, трудно дать точное решение без рабочего примера, но вам нужно расположить каждое из ваших изображений с относительным процентом ширины обертки

ProllyGeek · Answer 1 · 2014-02-15T21-34-00.000Z

0

Не используйте float, просто используйте width:33.3%, а height:auto

Пример:

http://fiddle.jshell.net/Ft3p4/

ProllyGeek 15 фев. 2014, в 21:34

1

Float - это чума современной сети - о, как часто, но, как правило, ненужно.
Nit 16 фев. 2014, в 00:02
0

мы говорим о деле, а не о стандарте, верно?
ProllyGeek 16 фев. 2014, в 00:39
0

Использование поплавка в целом - плохая и ненужная практика. Есть очень ограниченное хорошо аргументированное использование.
Nit 16 фев. 2014, в 00:47

Показать ещё 1 комментарий

Marcel · Answer 2 · 2014-02-15T21-31-00.000Z

Вы можете сделать что-то по линиям relative и absolute позиционирования и блокировать с процентной шириной.

Результат: http://jsfiddle.net/3mAh3/2/

Я дал все это оболочку (класс .collection) и стилизовал все div используя этот класс, может изменить его размер до практически любого, и он также будет хорошо перекрываться благодаря z-index

HTML

<div class="content">
<div class="collection">
  <div class="samp">
    <a href="index.html"><img src="http://therealmgaming.com/images/samp.png" /></a>
  </div>
  <div class="multiv">
    <a href="index.html"><img src="http://therealmgaming.com/images/multiv.png" /></a>
  </div>
  <div class="minecraft">
    <a href="index.html"><img src="http://therealmgaming.com/images/minecraft.png" /></a>
  </div>
</div>
</div>

CSS:

 .content {
    padding-top: 50px;
    text-align: center;
 }
 .collection {
    position: relative;
    width: 100%;
 }
 .collection div {
    position: absolute;
    width: 33%;
 }
 .multiv {
    top: 50px;
    left: 33%;
    z-index: 2;
 }
 .samp {
    left: 0;
    z-index: 1;
 }
 .minecraft {
    top: 30px;
    right: 0;
    z-index: 1;
 }

Вы можете безопасно удалить .collection и добавить стили к .content зависимости от другого содержимого в .content, но тогда не забудьте изменить .collection div .content div на .content div.

Пример: http://jsfiddle.net/3mAh3/4/

Или лучше: http://jsfiddle.net/3mAh3/5/

BruceWayne · Answer 3 · 2014-02-15T20-05-00.000Z

измените свой код с помощью этого, бра...

 .content {
    padding-top:50px;
    text-align: center;
    white-space: nowrap;
}

.samp, .minecraft, .multiv{
    vertical-align: top;
    display: inline-block;
}

.samp{
width: 247px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 320px;
}
.multiv{
width: 247px;
height: 431px;
margin-top: 100px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 60px;
}
.minecraft{
width: 234px;
height: 327px;
margin-top: 73px;
margin-right: 280px;
margin-bottom: 5px;
margin-left: 0px;
}

это даст вам сплошную обертку без сдвига, и вы можете настроить ее оттуда: F

Jfiddle к нему ... jsfiddle.net/3mAh3 Я еще не нашел ответа, поэтому, пожалуйста, помогите!