手机上的BG图像没有调整大小

时间:2017-11-28 20:38:51

标签: html css3 responsive-design

我试着这样做:

#include <iostream>
#include <fstream>
#include <cstring> // include this for strcpy() and strcat()

using namespace std;

// You need to have char* fullname as you are passing a cstring not a character
void displayInfo(char* fullName, int age); // You forgot the semi colon here

int main(void) // You need to have input parameters to main() it can be void
{
    char firstName[10] = "Bob";
    char lastName[10] = "0"; // Not an error but you should initialize like this
    char fullName[20] = "0"; // same here
    int age;
    cout << "Enter your age:  ";
    cin >> age;
    cout << "\nEnter the last name:  ";
    cin.getline(lastName, 10);

    strcpy(fullName, firstName); // Just use strcpy
    strcat(fullName, " "); // Just use strcat
    strcat(fullName, lastName); // Just use strcat
    strcat(fullName, "."); // Just use strcat

    // Move the display after you do string manipulation
    displayInfo(fullName, age); // You forgot semi colon here

    return 0;
}

// You need to have char* fullname as you are passing a cstring not a character
void displayInfo(char* fullName, int age) // You forgot the return type of this function
{
    cout << "Hello " << fullName << "You are " << age << "years old.";
}

使用新图片@media only screen and (max-width: 500px) { body { background: url("http://popidesigns.ro/images/bgtel.png") no-repeat center center fixed; } } 但没有变化。如何在整个手机屏幕上显示BG Pic? (bg图像是徽标上方的东西)
phone ss

laptop ss

3 个答案:

答案 0 :(得分:0)

添加background-size: cover以填充容器/正文

...并通过添加

确保身体至少100%高
html, body {
  height: 100%;
}

答案 1 :(得分:0)

看看这是否对您有所帮助:https://codepen.io/panchroma/pen/KyrvOP

CSS

html, body {
  height: 100%;
}

@media screen and (max-width: 500px) {

  body{
  background:url('http://popidesigns.ro/images/bgbgb.png') no-repeat;
  background-size:cover;
  }
}  

我还在页面的头部添加了一个视口元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

答案 2 :(得分:0)

body{
    background: URL("http://popidesigns.ro/images/bgtel.png") no-repeat center;
    background-size: cover;
    width: 100%;
}

这将确保图像不会重复并居中。背景尺寸:封面;将确保图像覆盖整个屏幕。宽度为100%有助于此。