Question

请查看附图以查看问题。无论浏览器窗口大小如何，我希望图像保持居中于其下方的矩形。当我调整浏览器大小时，图像不会保持纵横比与其下方的矩形相关。如何使图像相对于其下方的矩形调整大小？我试着在网上搜索，但一无所获。

＆＃13;

body{
	background-color: #fcab55;
}

* {
    box-sizing: border-box;
}

.container{
	width: 900px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: 1px slid red;
	max-width: 100%;
}



.pizza_img_background{
	max-width: 100%;
	width: 900px;
	height: 225px;
	background-color: #010606;
	margin-left: auto;
	margin-right: auto;
}

.pizza{
	position: relative;
	max-width: 100%;
	width: 855px;
	height: 192px;
	margin-top: 15px;
	margin-left: 22.5px;
	margin-right: 22.5px;
	background-image: url("images/pizza.png");
	background-repeat: no-repeat;
	background-size: contain;
}

＆＃13;

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

＆＃13;

Answer 1

您的问题还不清楚，这是您正在寻找的吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试更改

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

到

using System;
using System.Security.Policy;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Support;
using OpenQA.Selenium.Support.PageObjects;

namespace StackOverflowTest
{
    class Program
    {
        static void Main(string[] args)
        {
            IWebDriver driver = new ChromeDriver();
            driver.Navigate().GoToUrl("http://www.stackoverflow.com");
            driver.FindElement(By.LinkText("log in")).Click();
            driver.FindElement(By.ClassName("google-login")).Click();
            Int16 myInt = 2; //breakpoint goes here.
            driver.Close();
        }
    }
}

以下是codepen示例http://codepen.io/anon/pen/qZVKdJ

我希望这会对你有所帮助

Css响应式图像问题

2 个答案: