我对这个前端的东西很新。我有一张图像1200 * 900 px，我用它作为我的横幅的背景。在较大的屏幕上图像似乎很好，但是当我从响应式设计模式切换到Apple iPhone 6S时。背景从侧面切断。如何在较小的尺寸下保留完整的图像。
的index.html
<div class="container-fluid banner">
<div class="row">
<div class="col-md-8 content">
<h1>TThis is a banner image.</h1>
<p>Banner image is the main image we use on our web pages showing what your page is all about.</p>
</div><!--/.col-->
</div>
</div>
的style.css
.banner {
background: url(banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 680px;
position: relative;
}
我尝试过的一些解决方案是使用媒体查询在较小的屏幕尺寸上设置max-width: 100%
@media (max-width: 768px) {
.banner{ max-width: 100%; }
}
但是这个解决方案不起作用。使用屏幕尺寸缩放此背景的其他选择是什么？
答案 0 :(得分：2)
如果您想要显示完整图片，请使用cover代替cover。
如果您希望contain保留更大的屏幕，则可以仅在查询中将@media (max-width: 768px) {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
更改为#include <iostream>
#include <sys/select.h>
#include <cop_amqpcpp.h>
#include <cop_amqpcpp/linux_tcp.h>
using namespace std;
fd_set rfds;
class MyTcpHandler : public AMQP::TcpHandler
{
private:
/**
* Method that is called when the connection succeeded
* @param socket Pointer to the socket
*/
virtual void onConnected(AMQP::TcpConnection* connection)
{
std::cout << "connected" << std::endl;
}
/**
* When the connection ends up in an error state this method is called.
* This happens when data comes in that does not match the AMQP protocol
*
* After this method is called, the connection no longer is in a valid
* state and can be used. In normal circumstances this method is not called.
*
* @param connection The connection that entered the error state
* @param message Error message
*/
virtual void onError(AMQP::TcpConnection* connection, const char* message)
{
// report error
std::cout << "AMQP TCPConnection error: " << message << std::endl;
}
/**
* Method that is called when the connection was closed.
* @param connection The connection that was closed and that is now unusable
*/
virtual void onClosed(AMQP::TcpConnection* connection)
{
std::cout << "closed" << std::endl;
}
/**
* Method that is called by AMQP-CPP to register a filedescriptor for readability or writability
* @param connection The TCP connection object that is reporting
* @param fd The filedescriptor to be monitored
* @param flags Should the object be monitored for readability or writability?
*/
virtual void monitor(AMQP::TcpConnection* connection, int fd, int flags)
{
// we did not yet have this watcher - but that is ok if no filedescriptor was registered
if (flags == 0) return;
cout << "Fd " << fd << " Flags " << flags << endl;
if (flags & AMQP::readable)
{
FD_SET(fd, &rfds);
m_fd = fd;
m_flags = flags;
}
}
public:
int m_fd = -1;
int m_flags = 0;
};
int main(int argc, char* argv[])
{
MyTcpHandler myHandler;
int maxfd = 1;
int result = 0;
struct timeval tv
{
1, 0
};
// address of the server
AMQP::Address address(AMQP::Address("amqp://test:test@localhost/"));
// create a AMQP connection object
AMQP::TcpConnection connection(&myHandler, address);
// and create a channel
AMQP::TcpChannel channel(&connection);
channel.onError([](const char* message)
{
cout << "channel error: " << message << endl;
});
channel.onReady([]()
{
cout << "channel ready " << endl;
});
// use the channel object to call the AMQP method you like
channel.declareExchange("my-exchange", AMQP::fanout);
channel.declareQueue("my-queue");
channel.bindQueue("my-exchange", "my-queue", "my-routing-key");
do
{
FD_ZERO(&rfds);
FD_SET(0, &rfds);
cout << myHandler.m_fd << endl;
if (myHandler.m_fd != -1)
{
maxfd = myHandler.m_fd + 1;
}
result = select(maxfd, &rfds, NULL, NULL, &tv);
if ((result == -1) && errno == EINTR)
{
cout << "Error in socket" << endl;
}
else if (result > 0)
{
if (myHandler.m_flags & AMQP::readable)
cout << "Got something" << endl;
if (FD_ISSET(myHandler.m_fd, &rfds))
{
connection.process(maxfd, myHandler.m_flags);
}
}
}
while (1);
}
。
lrwx------ 1 pi pi 64 May 29 06:29 0 -> /dev/pts/1
lrwx------ 1 pi pi 64 May 29 06:29 1 -> /dev/pts/1
lrwx------ 1 pi pi 64 May 29 06:29 2 -> /dev/pts/1
lr-x------ 1 pi pi 64 May 29 06:29 3 -> pipe:[680897]
l-wx------ 1 pi pi 64 May 29 06:29 4 -> pipe:[680897]
lrwx------ 1 pi pi 64 May 29 06:30 5 -> socket:[678884]