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响应图像问题

回答

相关问题