我怎样才能做到这一点的图像

-7

How can do html css of below image 我怎样才能做到这一点的图像

2017-05-15 Chirag Solanki

请[张贴问题之前，先阅读] （http://stackoverflow.com/help/how-to-ask）。 – ZimSystem

预计您至少会尝试自己编写此代码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您所尝试的内容。 –

@paulie_d我认为这实际上是一个有趣的问题，可以通过做这样的事情来制作一个奇特的响应式设计版本：https：//codepen.io/chunyin/pen/VbdMPx –

考虑图像分成3个部分，并使用每个单独的部分，形成一个负责任的旗帜响应HTML。

我没有做过任何大小调整为更小的设备，但这里的想法：

$(document).ready(function(){ 
 
$(window).resize(function() { 
 
    $width = parseFloat($('.middle').css('width')); 
 
    $width = $(window).width() - $width; 
 
    $('.middle').css('left', $width); 
 
    $('.left').css() 
 
}); 
 
    
 
});

body { 
 
    border: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div { 
 
    display: inline; 
 
    overflow-x: hidden; 
 
    height: 100px; 
 
} 
 
.banner { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.left { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.right { 
 
    width: 50%; 
 
    float: right; 
 
    direction: rtl; 
 
    white-space: nowrap; 
 
} 
 
.middle { 
 
    left: 50%; 
 
    /* bring your own prefixes */ 
 
    transform: translate(-50%); 
 
    position: absolute; 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="banner"> 
 
    <div class="left"><img src='http://i.imgur.com/fFzlCZb.png'></div> 
 
    <div class="middle"><img src="http://i.imgur.com/tGvATgt.png"></div> 
 
    <div class="right"><img src="http://i.imgur.com/Z25wPIs.png"></div> 
 
</div>

下面是一些参考：https://codepen.io/chunyin/pen/VbdMPx

来源

2017-05-15 10:49:03

这不使用完整 –

或者您可以使用任何免费的在线资源，如：http://codepen.io/team/css-tricks/笔/ mVZGKa –

我也有这种风格，但我已经做到了这一点，你可以在HTML中做我发布的比回答请 –

我怎样才能做到这一点的图像

回答

相关问题