Css отзыв отзыв

-1

Пожалуйста, ознакомьтесь с прилагаемым изображением, чтобы увидеть проблему. Я хочу, чтобы изображение оставалось центрированным под прямоугольником под ним независимо от размера окна браузера. Когда я изменяю размер браузера, изображение не сохраняет пропорции относительно прямоугольника под ним. Как я могу изменить размер изображения относительно прямоугольника под ним? Я пробовал искать в сети, но ничего не нашел.Css отзыв отзыв

body{ 
 
\t background-color: #fcab55; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container{ 
 
\t width: 900px; 
 
\t height: auto; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t border: 1px slid red; 
 
\t max-width: 100%; 
 
} 
 

 

 

 
.pizza_img_background{ 
 
\t max-width: 100%; 
 
\t width: 900px; 
 
\t height: 225px; 
 
\t background-color: #010606; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
} 
 

 
.pizza{ 
 
\t position: relative; 
 
\t max-width: 100%; 
 
\t width: 855px; 
 
\t height: 192px; 
 
\t margin-top: 15px; 
 
\t margin-left: 22.5px; 
 
\t margin-right: 22.5px; 
 
\t background-image: url("images/pizza.png"); 
 
\t background-repeat: no-repeat; 
 
\t background-size: contain; 
 
}

\t \t <body> 
 
\t \t \t <header> 
 
\t \t \t </header> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="pizza_img_background"> 
 
\t \t \t \t <img src="images/pizza.png" alt="Pizza " class="pizza"> 
 
\t \t \t </div> 
 

 
\t \t </div> 
 

 
\t \t </body>

источник

2016-04-05 Catalin Borz

Любая причина, почему вы устанавливаете его в качестве фонового изображения, а не только с помощью 'img' элемента? – APAD1

... и почему «прямоугольник внизу» - это не просто простая рамка или тень? – CBroe

Вы пытались установить ширину и высоту '.pizza' на' 100% 'вместо фиксированной ширины? –

Попробуйте изменить

margin-left: 22.5px; 
margin-right: 22.5px; 
width: 855px;

padding-left: 22.5px; 
padding-right: 22.5px; 
width: 100%;

Вот это codepen пример http://codepen.io/anon/pen/qZVKdJ

Надеюсь, это вам поможет

источник

2016-04-05 20:18:07

Большое вам спасибо. Это именно то, что я искал. Единственное, что я изменил из вашего кода - это высота. Я не хочу, чтобы высота изменилась. Еще раз спасибо. –

Ваш вопрос довольно неясен, это то, что вы ищете?

.pizza { 
 
    text-align:center; 
 
} 
 
.img-container { 
 
    display:inline-block; 
 
    background:#000; 
 
    padding:20px; 
 
} 
 
    .img-container:hover { 
 
    background:#ccc; 
 
    } 
 
    .img-container img { 
 
    max-width:100%; 
 
    }

<div class="pizza"> 
 
    <div class="img-container"> 
 
    <img src="http://lorempizza.com/640/480" alt="Pizza" /> 
 
    </div> 
 
</div>

источник

2016-04-05 20:20:35 APAD1

У меня были проблемы при проживании в окне браузера. Изображение не сохраняло соотношение сторон с прямоугольником ниже. У меня было одно изображение с пиццей и прямоугольником Css под ним ... –

Работаю отлично для меня. – APAD1

Вы также правы. Спасибо! Имейте приятный день каждый. –

Css отзыв отзыв

ответ

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