Question

我对html / css很陌生，所以如果这是一个愚蠢的问题，请原谅我。基本上，在我的主页上，我有几个图像网格图标，这些图标超链接到网站上的其他页面。不过，我真的很想让它具有响应能力，如果有人可以帮助我使其具有响应能力，那就太好了！

这是我的HTML和CSS。请让我知道我可能做错了什么！

    <a href="page1.html"> 
    <div id="bor_panel"> 
    <img src="page1.jpg">
        <span>Page 1</span>
        
    </div>
    </a>

            
           
    <a href="page2.html"> 
    <div id="bor_panel"> 
    <img src="page2.jpg">
        <span>Page 2</span>
        
    </div>
    </a>        

            
    <a href="page3.html"> 
    <div id="bor_panel"> 
    <img src="page3.jpg">
        <span>Page 3</span>
        
    </div>
    </a>        
            
        
      <a href="page4.html"> 
    <div id="bor_panel"> 
    <img src="page4.jpg">
        <span>Page 4</span>
        
    </div>
    </a> 
            
       <a href="page5.html"> 
    <div id="bor_panel"> 
    <img src="page5.jpg">
        <span>Page 5</span>
        
    </div>
    </a>        
            
        <a href="page6.html"> 
    <div id="bor_panel"> 
    <img src="page6.html">
        <span>Page 6</span>
       </div>

#bor_panel {       
    font-family: 'Bebas Neue', cursive;
    font-size: 2em;
    border-radius: 12px;
    border: 2px solid #000;s
    float: left;    
    margin-top: 10px;
    margin-left: 16px;    
    margin-right: 16px;
    width: 270px;
    height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
    justify-content: space-between
}

Answer 1

该类会添加它：

img-fluid        --Bootstarp3
img-resposive    --Bootstarp4

如何使图像网格响应？

1 个答案: