Question

这是您要解决的一个简单问题。图片应为90vw，并且容器应在图片上添加边框。

边框不能直接应用于图片，因为在进一步编码的步骤中，图片会直接应用于html。

当前的实现导致边框小于图像。如何将其很好地包裹在图像周围？

我真的希望对我这样的新手来说，保持简单和易于理解是一件简单的事情，所以请不要使用像我在Stack Overflow上通常看到的那样轻柔优美的着陆来进行三次翻转和派克跳跃的代码。

HTML：

<div id="main-image-container-slideshow">
   <img id="main-image-slideshow" src="http://localhost:8888/image/jpeg/campus1.jpg">
</div>

CSS：

#main-image-container-slideshow {
    border: 5px solid black;
}

#main-image-slideshow {
    width: 90vw;
}

Answer 1

我将容器设为90vw，并让容器具有边框。图像将是90vw容器的整个宽度。我将图像做成一个块，以去除其下方任何潜在的不需要的空间。

const {children, Component, ...rest} = this.props

Answer 2

您可以将包装器的display属性设置为flex，并将flex-direction属性设置为column。而且，如果您决定更改图像的宽度，则不必更改CSS中的display属性。

#main-image-container-slideshow {
  display: flex;
  flex-direction: column;
  border: 2px solid white;
}

#img {
  width: 90vw;
}

html {
  background-color: black; /* sets the background color to black to make it easier to see the border */
}

<div id="main-image-container-slideshow">
   <img id="main-image-slideshow" src="https://img.freepik.com/free-photo/wall-wallpaper-concrete-colored-   painted-textured-concept_53876-31799.jpg?size=626&ext=jpg">
</div>

代码段中使用的图片位于freepik。

Answer 3

您可以将容器宽度设置为100vw，将图像宽度设置为容器宽度的90％，相当于90vw。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <cors enabled="true" failUnlistedOrigins="true">
            <add origin="*" allowed="false"/>
            <add origin="https://intranet.company.local" allowCredentials="true"> 
                <allowHeaders allowAllRequestedHeaders="true" />
                <allowMethods>
                     <add method="GET" />
                </allowMethods>
            </add>
            <add origin="http://intranet.company.local" allowCredentials="true">
                <allowHeaders allowAllRequestedHeaders="true" />
                <allowMethods>
                     <add method="GET" />
                </allowMethods>
            </add>
        </cors>
    </system.webServer>
</configuration>

.image-container {
  width: 100vw;
  border: 5px solid #000000;
}
.image {
  width: 90%;
}

图像变得大于带有边框的div容器并溢出

3 个答案: