Question

我是HTML / CSS的新手。我已经开始开发一个网站，但我的主要＆＃34;英雄＆＃34;图像不适合较小的页面并留下空白区域。如果你能帮我诊断问题，我们将不胜感激。

* / css * /

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.ActionEvent;
import java.awt.event.KeyEvent;

import javax.swing.*;

@SuppressWarnings("serial")
public class SimpleAnimationEg extends JPanel {
   private static final int OVAL_WIDTH = 20;
   private static final int PREF_W = 400;
   private static final int PREF_H = PREF_W;
   private int x = 0;
   private int y = 0;

   public SimpleAnimationEg() {
      addKeyBindings();
   }

   private void addKeyBindings() {
      InputMap inputMap = getInputMap(WHEN_IN_FOCUSED_WINDOW);
      ActionMap actionMap = getActionMap();

      KeyStroke keyStroke = KeyStroke.getKeyStroke(KeyEvent.VK_UP, 0);
      inputMap.put(keyStroke, keyStroke.toString());
      actionMap.put(keyStroke.toString(), new MyAction(0, -1));

      keyStroke = KeyStroke.getKeyStroke(KeyEvent.VK_DOWN, 0);
      inputMap.put(keyStroke, keyStroke.toString());
      actionMap.put(keyStroke.toString(), new MyAction(0, 1));

      keyStroke = KeyStroke.getKeyStroke(KeyEvent.VK_LEFT, 0);
      inputMap.put(keyStroke, keyStroke.toString());
      actionMap.put(keyStroke.toString(), new MyAction(-1, 0));

      keyStroke = KeyStroke.getKeyStroke(KeyEvent.VK_RIGHT, 0);
      inputMap.put(keyStroke, keyStroke.toString());
      actionMap.put(keyStroke.toString(), new MyAction(1, 0));
   }

   @Override
   protected void paintComponent(Graphics g) {
      super.paintComponent(g);
      Graphics2D g2 = (Graphics2D) g;
      g2.setColor(Color.RED);
      g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
      g2.fillOval(x, y, OVAL_WIDTH, OVAL_WIDTH);
   }

   @Override
   public Dimension getPreferredSize() {
      if (isPreferredSizeSet()) {
         return super.getPreferredSize();
      }
      return new Dimension(PREF_W, PREF_H);
   }

   private class MyAction extends AbstractAction {
      private int xDirection;
      private int yDirection;

      public MyAction(int xDirection, int yDirection) {
         this.xDirection = xDirection;
         this.yDirection = yDirection;
      }

      @Override
      public void actionPerformed(ActionEvent e) {
         x += xDirection;
         y += yDirection;
         repaint();
      }
   }

   private static void createAndShowGui() {
      JFrame frame = new JFrame("SimpleAnimationEg");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.getContentPane().add(new SimpleAnimationEg());
      frame.pack();
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
   }

   public static void main(String[] args) {
      SwingUtilities.invokeLater(new Runnable() {
         public void run() {
            createAndShowGui();
         }
      });
   }
}

* / html * /

#intro {
    z-index: 100;
    width: 100%;
    height: 66%;
    background: url("../images/intro2.jpg"); center center no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    top:10%;
    background-position: 0px -150px;
    left: 0;
    position: absolute;
    background-size: 100%;
}
#intro .wrap{
    margin: 0 auto;
    position: relative;
}
#intro .content{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

也可以查看该网站Here

Answer 1

这就是我如何做到这一点：

CSS

html,body{
  margin:0;
  height:100%;
}

.section{
  width:100%;
  height:100%;
  display:block;
  float:left;
  position:relative;
  overflow:hidden;
  background:purple;
}

.section img{
    position:absolute;
    top:50%;
    min-height:100%;
    display:block;
    left:50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    min-width:100%;  
}

HTML

<div class="section">
   <img src="http://th02.deviantart.net/fs42/PRE/f/2009/133/a/0/Rainy_Landscape_STOCK_by_wyldraven.jpg"/>
</div>
<div class="section">
</div>

示例：CodePen

您会注意到，无论您缩放页面（或部分）的大小，图像都将始终展开以填充父容器。

CSS背景图像不适应屏幕尺寸

1 个答案: