Question

我想在html中创建小页面。我能够做到这一点。但是当plunker屏幕很小时它看起来很好。示例：当您运行项目时，它看起来很好。但是当用户在全屏幕上运行时，它看起来很尴尬。

这是我想要做的图像 enter image description here http://plnkr.co/edit/Cz10CYGKBBkG0oT0eO6C?p=preview

这是我的代码 http://plnkr.co/edit/Cz10CYGKBBkG0oT0eO6C?p=preview

实际上当用户全屏运行时我会注意到这些事情吗？

为什么图像宽度不超过35％
是设计布局的方式还是我设计错误的方法

如何设计响应式布局

<ion-header-bar class="bar-assertive">

    <img src="https://dl.dropboxusercontent.com/s/bt3rzcwpe80r6fs/sapient-logo.png?dl=0" class="logo">

    <div class="barTab">
        <a>Home</a>
        <a>About us</a>
        <a>Projects</a>
        <a id="contactus">Contact Us</a>
    </div>
</ion-header-bar>

<ion-content>
    <div id="wrapper">
        <div id="header">
            <h1> Contact us</h1>
        </div>
        <div id="slideTest">

            <ion-slide-box pager-click="doSomething(index)">
                <ion-slide ng-repeat="n in success">
                    <img src={{n.image}}>
                </ion-slide>

            </ion-slide-box>

        </div>
        <div id="rightContainer">
            <div id="textContainer">

                What you’ve already accomplished is important. But, we’re interested in what you’re going to do next. At Sapient Global Markets, we bring together the brightest minds in the financial industry and set the stage for innovation and excellence. Given the right environment, the best tools and an incredible team to work with, what can you achieve?
            </div>
            <div id="formID">
                <div class="list list-inset">
                    <label class="item item-input">
                        <input type="text" placeholder="First Name">
                    </label>
                    <label class="item item-input">
                        <input type="password" placeholder="Password">
                    </label>
                    <label class="item item-input">
                        <input type="password" placeholder="Confirm Password">
                    </label>
                    <label class="item item-input">
                        <input type="email" placeholder="Email">
                    </label>
                    <label class="item item-input">
                        <input type="text" placeholder="website">
                    </label>

                <button class="button frmbtn">
                    submit
                </button>
                </div>

            </div>
        </div>
    </div>
</ion-content>

Answer 1

http://plnkr.co/edit/3fu32oUq47KSmli6TP2p?p=preview

添加这些规则

.slider-slides img {
  width: 100%;
  height: auto;
}
.slider-pager {
    background: rgba(255,255,255,0.7);
}

后者使控件可见。

Answer 2

您使用的实际图像宽度为202像素，如果宽度为210像素，则需要占用的空间。如果您希望图像覆盖该区域，可以使图像本身变大，并自动完成。

此外，您可以在CSS中为width: 100%标记指定img。但只要图像较小，它就会被拉伸，并且看起来不像拥有合适尺寸的源图像那么好。

所以我认为最好的解决方案是两者兼顾。通过CSS设置合适的大小，使源图像足够大，以完全覆盖该区域。

Answer 3

您可能希望将以下css添加到代码中，但响应高度仍然存在问题。

@Named    //Makes no difference if this is here or not
@FacesComponent(value="family", createTag=true, namespace="...namespace...", tagName="tag")
public class Component extends UIComponentBase {

    @Inject
    public class Holder holder;

    @Override
    public void encodeBegin(FacesContext context) {
        holder.getData();
    }
}

http://plnkr.co/edit/dUvIbYDxH27o81NKJ8dg?p=preview

Answer 4

你尝试过吗？：

ion-slide img {
    max-width: 100%;
    display: block;
    height: auto;
    width: 100%;
}

Answer 5

.slider-slide - 删除height: 100%;，添加.slider-slides
height: 100%; - 删除overflow: hidden;
.slider - 删除overflow: hidden;，添加.slider-slide{ height: auto; } .slider-slides{ height: auto; overflow: hidden; } .slider{ overflow: hidden; } .slider-slide img{ width: 100%; height: auto; }
_render() - 添加initialize
列出项目

.slider-slide img { 宽度：100％; 身高：自动; }

-

{
    "_id" : ObjectId("52517d9e6e0af435ddd48219"),
    "date" : ISODate("2013-10-06T18:11:26.329Z"),
    "engines" : [
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "ahnlab",
            "node_name" : "",
            "status" : 1,
            "task_id" : "7fac4f67-2bde-49de-980a-4f7fa1d46db7",
            "threat" : "EICAR_Test_File"
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "avast",
            "node_name" : "",
            "status" : 4,
            "task_id" : "fdce50e9-9bf3-4cc9-91a4-b674a108d478",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "avg",
            "node_name" : "",
            "status" : 1,
            "task_id" : "4bdb4a37-80ab-4631-8587-edcbde7e2592",
            "threat" : "EICAR_Test"
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "avira",
            "node_name" : "",
            "status" : 4,
            "task_id" : "43b43bab-ff67-440c-9919-f6241ccaf539",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "bitdefender",
            "node_name" : "",
            "status" : 4,
            "task_id" : "ba7efe74-ef93-465f-b6c3-6c4fc746934d",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "comodo",
            "node_name" : "",
            "status" : 4,
            "task_id" : "831d2dc8-704b-4eb7-9a75-9a0364a8ab09",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "drweb",
            "node_name" : "",
            "status" : 4,
            "task_id" : "ebb758c3-9146-4a99-b36f-0fb6ee024a33",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "f-prot",
            "node_name" : "",
            "status" : 4,
            "task_id" : "13590a25-ac0d-4b1b-b93e-bc715009432a",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "forticlient",
            "node_name" : "",
            "status" : 4,
            "task_id" : "",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "kaspersky",
            "node_name" : "",
            "status" : 4,
            "task_id" : "",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "malwarebytes",
            "node_name" : "",
            "status" : 4,
            "task_id" : "a97f3d9a-d6a9-44df-8355-c053e9f4980a",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "mcafee",
            "node_name" : "",
            "status" : 1,
            "task_id" : "e7a592bb-84fc-4c47-a1ed-3719874b19cc",
            "threat" : "EICAR test file"
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "msessentials",
            "node_name" : "",
            "status" : 4,
            "task_id" : "01c9fb71-155a-473d-b45c-91fa117ae649",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "nod32",
            "node_name" : "",
            "status" : 4,
            "task_id" : "a715cc8f-0e2f-4698-b883-a35fa6add13e",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "norman",
            "node_name" : "",
            "status" : 4,
            "task_id" : "29da2955-0674-45d2-ac4d-c0b3ea401cba",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "norton",
            "node_name" : "",
            "status" : 4,
            "task_id" : "c4cd1e3e-2f0d-4bf6-84cf-ab0962f7f4ed",
            "threat" : ""
        },
        {
            "definitions" : ISODate("2000-01-01T00:00:00.000Z"),
            "name" : "panda",
            "node_name" : "",
            "status" : 4,
            "task_id" : "b0888f7c-e4a4-4b4e-b163-21d283e166f1",
            "threat" : ""
        }
    ],
    "expiration_date" : ISODate("2013-10-06T18:11:36.329Z"),
    "file_name" : "ffgtr.exe",
    "scan_status" : "DONE",
    "task_id" : "4ce4ae9e-ef0a-476a-8189-92a5bfe328bd"
}

为什么图像不占全宽％？

5 个答案: