javascript - 为什么文字会压低图片？-6ren

javascript - 为什么文字会压低图片？

转载作者：行者123 更新时间：2023-11-28 05:12:18

我正在研究一个网站的响应能力，出于某种原因，“照片编辑”文本将猫照片压低了。我希望所有的文字都在左边，让照片很好地叠放。要查看问题，请以 600 像素宽度的视口(viewport)查看此网站!!!在这里查看网站 https://ivanbarr.github.io/photostory/

      <body>
    <div class="wrapper">
      <!--NAV-->
      <nav>
        <div class="menu-icon">
          <img src="images/menu-icon.png">
        </div>
        <img class="logo" src="images/logo.png" alt="Photobook">
        <img class="share" src="images/share.png">
        <div class="phone">
          +11 258 364 1767
        </div>
      </nav>
      <!--MENU-->
      <div class="menu">
        <ul>
          <li><a href="#advantage">Why PhotoBook?</a></li>
          <li><a href="#photobooks">PhotoBooks</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
          <li><a href="#terms">Terms</a></li>
        </ul>
      </div>

      <!--Banner-->
      <div class="banner">
        <h1>CREATE YOUR OWN<br/> PHOTOSTORY</h1>
        <h3>Make your photobook online</h3>
        <div class="button">MAKE YOUR PHOTOBOOK</div>
      </div><!--button-->

    <div class="steps"><!--Steps-->
      <div class="circles">
          <div class="cloud circle">
          </div><!--Cloud-->
          <div class="dashed-line">
          </div>
          <div class="screen circle">
          </div><!--Screen-->
          <div class="dashed-line">
          </div>
          <div class="hand circle">
          </div><!--Hand-->
          <div class="dashed-line">
          </div>
          <div class="hand-truck circle">
          </div><!--Hand Truck-->
      </div><!--circles-->

      <div class="captions">
        <p>Download<br/>photos</p>
        <p>Design your<br/>photobook</p>
        <p>Pay<br/>for service</p>
        <p class="margin-fix">Get your<br/>photobook</p>
      </div>
    </div><!--Steps-->

    <!--Advantage-->
    <div class="advantage">
      <a name="advantage"></a>
      <h1>ADVANTAGE</h1>
        <div class="adv-desc">
          <h3>Import photos <br/>from your social networks</h3>
          <p>Lorem ipsum dolor sit amet, consectetur<br/> adipisicing elit, sed do eiusmod tempor<br/> incididunt modi tempora</p>
        </div><!--adv-desc-->
        <div class="social white-circle">
        </div><!--Social-->

        <div class="adv-desc">
          <h3>Photo Editing</h3>
          <p>Lorem ipsum dolor sit amet, consectetur <br/>adipisicing elit, sed do eiusmod tempor<br/> incididunt ut labore et dolore magna<br/> aliqua. Ora incidunt ut labore.</p>
        </div><!--adv-desc-->
        <div class="social">
          <img src="images/cat.png">
        </div><!--Social-->

        <div class="adv-desc">
          <h3>Templates</h3>
          <p>Lorem ipsum dolor sit amet, consectetur<br/>adipisicing. Ut enim ad minim, nostrud<br/> exercitation ullamco laboris nisi ut<br/> aliquip ex commodo.</p>
        </div><!--adv-desc-->
        <div class="social">
          <img src="images/templates.png">
        </div><!--Social-->
        <div class="make-your">
          <p>MAKE YOUR PHOTOBOOK</p>
        </div><!--make your photobook-->
    </div><!--Advantage-->
    <div class="ready-solutions">
      <a name="photobooks"></a>
      <h1>Ready<br/>Solutions</h1>

      <div class="light-book">
        <a name="lightbook"></a>
        <h2>LightBook</h2>
        <div class="content">
          <ul>
            <li>15x10 cm</li>
            <li>12 pages</li>
            <li>binding on the clip</li>
          </ul>
          <div class="price">
           <h3>$129</h3>
        </div><!--price-->
        </div><!--content-->
        <p>Make your LightBook</p>
      </div><!--light-book-->

      <div class="best-seller">
        <p>BESTSELLER</p>
      </div><!--Best-seller-->
      <div class="classic-book">
        <a name="classicbook"></a>
        <h2>ClassicBook</h2>
        <div class="content">
          <ul>
            <li>30x21 cm</li>
            <li>36 pages</li>
            <li>binding on the clip</li>
            <li>fabric cover</li>
          </ul>
          <div class="price">
          <h3>$239</h3>
        </div><!--price-->
        </div><!--content-->
        <p>Make your ClassBook</p>
      </div><!--classic-book-->
      <div class="premium-book">
        <a name="premiumbook"></a>
        <h2>PremiumBook</h2>
        <div class="content">
          <ul>
            <li>42x50 cm</li>
            <li>50 pages</li>
            <li>hardcover</li>
            <li>leather cover</li>
            <li>free shipping</li>
          </ul>
          <div class="price">
          <h3>$759</h3>
        </div><!--price-->
        </div><!--content-->
        <p>Make your PremiumBook</p>
      </div><!--premium-book-->
    </div><!--ready-solutoins-->
    <div class="testimonials">
      <a name="testimonials"></a>
      <h1>TESTIMONIALS</h1>
      <img class="profile-pic" src="images/profile-pic.png">
        <div class="bio">
          <h3>John Doe</h3>
          <p>Wedding photographer</p>
        </div><!--bio-->
      <div class="description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br/> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <br/>veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <br/>commodo consequat.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore<br/> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,<br/> sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
      </div><!--description-->
      <div class="next-testimonial">
        <p>Next testimonial</p>
        <img src="images/arrow.png">
      </div><!--Next Testimonial-->
      <div class="button">MAKE YOUR PHOTOBOOK</div>
    </div><!--button-->
    </div><!--testimonials-->
    <div class="info">
      <a name="terms"></a>
      <div class="box">
        <div class="box-title">
          <p>Terms</p>
        </div><!--box-title-->
        <div class="box-content">
          <p>Lorem ipsum dolor sit amet, <br/>consectetur adipisicing elit, sed <br/>do eiusmod tempor.</p>
          <p>Duis aute irure dolor in<br/> reprehenderit in voluptate velit <br/>esse cillum dolore eu fugiat <br/>nulla.</p>
        </div><!--box-content-->
      </div><!--box-->
      <div class="box">
        <div class="box-title">
          <p>Payment</p>
        </div><!--box-title-->
        <div class="box-content payment">
          <p>Payment methods:</p>
          <ul>
            <li>VISA</li>
            <li>MasterCard</li>
            <li>PayPal</li>
            <li class="margin-bottom">American Express</li>
          </ul>
        </div><!--box-content-->
      </div><!--box-->
      <div class="box">
        <div class="box-title">
          <p>Shipping</p>
        </div><!--box-title-->
        <div class="box-content margin-bottom">
          <p>Lorem ipsum dolor sit amet,<br/> consectetur adipisicing elit, sed<br/> do eiusmod tempor incididunt ut<br/> labore et dolore magna aliqua.</p>
          <p>Free shipping for<br/> PremiumBook</p>
        </div><!--box-content-->
      </div><!--box-->
      <div class="make-your button-info">
        <p>MAKE YOUR PHOTOBOOK</p>
      </div><!--make your photobook-->
    </div><!--info-->
    <footer>
      <div class="nav-wrapper">
        <div class="nav nav-1">
          <ul>
            <li>About us</li>
            <li>Careers</li>
            <li>Help</li>
            <li>Press</li>
          </ul>
        </div><!--nav 1-->
        <div class="nav nav-2">
          <ul>
            <li><a href="#terms">Terms</a></li>
            <li><a href="#terms">Payment</a></li>
            <li><a href="#terms">Shipping</a></li>
            <li>Contact</li>
          </ul>
        </div><!--nav 1-->
        <div class="nav nav-3">
          <ul>
            <li><a href="#lightbook">LightBook</a></li>
            <li><a href="#classicbook">ClassicBook</a></li>
            <li><a href="#premiumbook">PremiumBook</a></li>
          </ul>
        </div><!--nav 1-->
        <div class="nav social-footer">
          <img src="images/facebook.jpg">
          <img src="images/blogger.jpg">
          <img src="images/instagram.jpg">
          <img class="asanov" src="images/asanov.png">
        </div><!--nav 1-->
      </div><!--nav wrapper-->
        <p class="copyright">&copy;IvanBar 2016</p>
    </footer>
  </div><!--wrapper-->
    <script type="text/javascript" src="javascript/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="javascript/javascript.js"></script>
 </body>
</html>

移动版样式

/* NAV */
.wrapper{
  overflow: hidden;
}
nav{
  max-width: 1520px;
  background-color: #ffffff;
  overflow: hidden;
}

.menu-icon{
  display: inline-block;
  padding: 15px 15px 10px 15px;
  cursor: pointer;
}

.logo{

}

.share{
  float: right;
  padding: 10px;

}

.phone{
  display: none;
}

/* MENU */

.menu{
  text-align: center;
  line-height: 35px;
  height: 145px;
  display: none;
}

.menu li{
  list-style-type: none;
}

.menu li:hover{
  border: solid black 1px;
  margin-bottom: -1px;
}

.menu li a{
  text-decoration: none;
}
.menu li a:visited{
  color: black;
}

/* Banner */

.banner{
  background-image: url("../images/banner-bg.jpg");
  background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  text-align: center;
  height: 220px;
}

.banner h1{
  padding: 15px 0 20px 0;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  letter-spacing: 2px;
  line-height: 25px;
  font-size: 1.4em;
}

.banner h3{
  display: none;
}

.button{
  border: solid black 1px;
  background: transparent;
  width: 200px;
  padding: 10px;
  margin: 0 auto;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: .90em;
  cursor: pointer;
}

.button:hover{
  text-decoration: underline;
}

/* STEPS */

.cloud{
    background-image: url("../images/cloud.png");
}

.screen{
    background-image: url("../images/screen.png");
}

.hand{
    background-image: url("../images/hand.png");
}

.hand-truck{
    background-image: url("../images/hand-truck.png");
}
.circles{
  width: 140px;
  float: right;
  margin-right: 10px;
  margin-top: 30px;
}
.circle{
  width: 130px;
  height: 130px;
  border-radius: 100px;
  background-color: white;
  background-repeat:no-repeat;
  -webkit-background-size: 50%;
  -moz-background-size: 50%;
  -o-background-size: 50%;
  background-size: 50%;
  background-position: center;
  border: solid #ffd200 5px;

}

.captions{
  width: 160px;
}

.captions p{
  margin-bottom: 150px;
  display: block;
  position: relative;
  top: 70px;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  text-align: center;
  font-size: 1.3em;
}

.dashed-line{
  width: 0;
  height: 40px;
  border: solid #ffd200 2px;
  border-style: dashed;
  margin: 0 auto;
}

/* Advantage */

.advantage{
  background-color: #f3f0e7;
}

.advantage h1{
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  padding-top: 20px;
  padding-bottom: 40px;
  font-size: 1.5em;
  letter-spacing: 10px;
}

.white-circle{
  height: 267px;
  width: 267px;
  border-radius: 133px;
  background-color: white;
  background-image: url("../images/social.png");
  background-repeat:no-repeat;
  -webkit-background-size: 50%;
  -moz-background-size: 50%;
  -o-background-size: 50%;
  background-size: 80%;
  background-position: center;
}
.social img{
  display: block;
  margin: 0 auto;
}
.social{
  margin: 0 auto;
  margin-bottom: 30px;
}
.advantage{
  overflow: hidden;
}
.advantage h3{
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  font-size: 1.5em;
}

.advantage p{
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
  font-size: 0.8em;
  line-height: 18px;
  color: #8c8c8c;
}

.make-your{
  width: 240px;
  background-color: #e11a27;
  border-radius: 10px;
  margin: 0 auto;
  cursor: pointer;
}
.make-your:hover{
  background-color: #a0131c;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
}

.make-your p{
  font-size: 0.8em;
  font-family: 'Open Sans', sans-serif;
  color: white;
  padding: 15px;
  text-align: center;
}

/* Ready Solutions */

.ready-solutions h1{
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 1.7em;
  letter-spacing: 10px;
  line-height: 30px;
}
.light-book, .classic-book, .premium-book{
  width: 280px;
  height: 400px;
  background-color: #ffd200;
  margin: 30px auto;
  border-radius: 10px;
}

.light-book{
  margin-bottom: 18px;
}

.classic-book{
  margin-top: 0;
}

.best-seller{
  width: 150px;
  margin: 0 auto;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 25px solid #ffd200;;
}

.ready-solutions p{
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  font-size: 1.5em;
  padding-top: 15px;
}

.best-seller p{
  text-align: center;
  position: relative;
  bottom: -25px;
  color: #e11a27;
  font-weight: bold;
  font-size: 1.1em;
  font-family: 'Ropa Sans', sans-serif;
  letter-spacing: 4px;

}

.ready-solutions h2{
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  font-weight: lighter;
  padding-top: 35px;
}

.content{
  width: 250px;
  height: 240px;
  background-color: white;
  margin: 0 auto;
  margin-top: 40px;
  position: relative;
}

.content ul{
  padding: 10px 0 0 15px;
}

.content li{
  padding-bottom: 10px;
  padding-left: 30px;
  list-style: none;
  background-image: url("../images/check.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.price h3{
  line-height: 100px;
  text-align: center;
  font-size: 3em;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
}

.price{
  width: 252px;
  height: 100px;
  position: absolute;
  bottom: 0;
}

/* Testimonials */

.testimonials{
  background-color: #f7f0e6;
  overflow: hidden;
}

.testimonials h1{
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  padding-top: 20px;
  padding-bottom: 40px;
  font-size: 1.5em;
  letter-spacing: 10px;
}

.profile-pic{
  display: inline-block;
  width: 140px;
  height: 140px;
  padding-left: 5px;
  padding-bottom: 20px;
}

.bio{
  float: right;
  font-family: 'Alegreya Sans', sans-serif;
  padding-top: 50px;
  margin-right: 15px;
}

.bio p{
  font-size: .9em;
}

.bio h3{
  font-size: 1.7em;
  font-weight: lighter;
}

.description{
  overflow: hidden;
}

.description p{
  float: left;
  padding: 0 10px 15px 15px;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
  font-size: .9em;
  line-height: 15px;
}

.button{
  border: solid black 1px;
  background: transparent;
  width: 200px;
  padding: 10px;
  margin: 0 auto;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: .90em;
  cursor: pointer;
  text-align: center;
  margin-bottom: 40px;
}

.next-testimonial{
  padding-top: 20px;
}

.next-testimonial p{
  text-align: center;
  padding-bottom: 5px;
}

.next-testimonial img{
  display: block;
  margin: 0 auto;
  padding-bottom: 30px;
}

/* Info */
.box{
  width: 280px;
  margin: 20px auto;
}
.box-title{
  width: 280px;
  background-color: #ffd200;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom: 8px solid white;
}

.box-title p{
  text-align: center;
  padding: 20px 20px;
  font-size: 1.7em;
}

.box-content{
  width: 280px;
  background-color: #f7f0e6;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
}

.box-content p{
  padding: 15px;
}

.box-content p + p{
  padding-bottom: 40px;
}

.margin-bottom, li.margin-bottom{
  margin-bottom: 40px;
}

.button-info{
  margin-bottom: 60px;
}

.payment ul{
  padding-left: 40px;
}

.payment li{
  padding-bottom: 10px;
}

.margin-bottom p + p{
  color: #e11a27;
  font-weight: bold;
  font-family: 'Open Sans', sans-serif;
  font-size: .8em;
  line-height: 15px;
}

.margin-bottom p{
  padding-bottom: 5px;
}

/* Footer */

footer{
  background-color: #ffd200;
  overflow: hidden;
}

.nav-wrapper{
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}

.nav{
  width: 40%;
  border-top: solid black 1px;
  float: left;
  margin-top: 30px;
  margin-left: 4%;
  margin-right: 4%;
}

.nav li{
  padding-top: 10px;
  list-style: none;
}

.nav li:hover{
  text-decoration: underline;
}
.nav li a{
  text-decoration: none;
}

.nav li a:visited{
  color: black;
}

.nav img{
  padding-top: 10px;
  list-style: none;
  cursor: pointer;
  padding-bottom: 20px;
}

.social-footer{
  width: 40%;
}
.copyright{
  text-align: center;
  padding-bottom: 10px;
  width: 100%;
}

平板电脑样式(600 像素宽度)

@media only screen
  and (min-width: 370px){
    /* steps */
    .circles{
      margin-right: 20px;
    }

    /* testimonials */
    .profile-pic{
      padding-left: 15px;
    }

    .bio{
      margin-right: 30px;
    }

}

@media only screen and (min-width: 600px){

  /* banner */

  .banner h1{
    font-size: 1.6em;

  }

  .button{
    width: 230px;
    padding: 15px;
    font-size: 1em;
  }

  /* steps */
  .circles{
    width: 90%;
    padding-top: 70px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    overflow: hidden;
    margin-top: 0;
  }

  .circle{
    width: 83px;
    height: 83px;
    float: left;
  }

  .dashed-line{
    width: 45px;
    height: 0;
    float: left;
    margin: 42.5px auto;
  }

  .captions{
    width: 90%;
    height: 150px;
    margin: 0 auto;
  }

  .captions p{
    display: inline-block;
    margin-bottom: 0;
    top: 20px;
    margin-right: 45px;
    margin-left: 5px;
  }

  p.margin-fix{
    margin-right: 0;
  }

  /* advantage */
  .adv-desc{
    float: left;
    margin-bottom: 100px;
    margin-top: 50px;
  }

  .white-circle{
    float: right;
    width: 230px;
    height: 230px;
  }

 .social{

  }

  .social img{
    width: 230px;
    height: 230px;
    margin-right: 0;
  }

  .make-your{
    /*top: 40px;*/
  }

  /* testimonials */
  .bio{
    padding-right: 100px;
  }

  .profile-pic{
    padding-left: 150px;
  }

  .description{
    width: 70%;
    margin: 0 auto;
  }
}

最佳答案

尝试这样的事情

@media only screen and (min-width: 600px)
.adv-desc {
    float: left;
    /* margin-bottom: 100px; */
    /* margin-top: 50px; */
    width: 300px;
}
.advantage {
    overflow: hidden;
    width: 600px;
    margin:0 auto;
}
.social {
    float: left;
    width: 300px;

}
.make-your {
   clear:both;
}
}

演示:https://jsfiddle.net/q6m8us0t/2/

关于javascript - 为什么文字会压低图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39482303/

文章推荐： javascript - dburles meteor Google map API 错误 : MissingKeyMapError

文章推荐： javascript - react MDL : No drawer button with standalone drawer

文章推荐： c++ - 不会创建 Makefile

javascript - 获取数据:图片/png；base64，{{图片}} net::ERR_INVALID_URL
我想使用 Angular.js 转换从服务器获取的图像数据(用于 ionic 框架)，我使用了这段代码: $http.post(link, { token: token,
javascript - IOS设备隐藏 "Play Store"图片，Android设备隐藏 "App Store"图片
我正在为我的应用制作一个登陆页面。如果它们在 iOS 设备上，我希望它只显示“App Store”图标，但在 Android 上隐藏它。如果它们在 Android 设备上，则只有“Play Store
JavaScript 图片
如何在同一页面上多次显示同一张图片？ function xdf(){ for (i=0;ihello world'); } } 此代码显示“hello world”10 次。我想要同样的东西，
css 图片
您好，我有一个 1px 的 png 文件，我试图将其设置为两个水平相邻的 div 的背景图像。html 和 css 如下:- hi hello css是这样的 div { width: 50%
image - PrestaShop 图片
我的 PHP 项目安装了 Prestashop 1.4.9.0。当我添加一个新产品时，我上传了一个PNG格式的图片，但是当它在客户端显示时，图片是JPG格式的。如何保留图片扩展名？最佳答案在后台
r - 发送表达式给网站返回动态结果(图片)
我用 http://www.regexper.com查看一个象形表示正则表达式很多。我想要一种理想的方法: 向站点发送正则表达式打开显示该表达式的站点例如，让我们使用正则表达式:"\\s*foo[
电子邮件问题中的 Phpmailer 图片
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端，如 gmail、outlook 或 private，图像是正确的，看起来像这样: PHP邮件程
javascript - 使用XPCOM上传网页文件/图片
我正在使用此处找到的示例。 Mozilla developers 我对这个例子很感兴趣。 function upload(postUrl, fieldName, filePath) { var f
电子邮件问题中的 Phpmailer 图片
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端，如 gmail、outlook 或 private，图像是正确的，看起来像这样: PHP邮件程
java - 如何根据javafx中的复选框选择生成按钮(图片)
我的问题是如何根据用户在javafx中选择的复选框和/或单选按钮生成带有汽车图片设置的按钮？我正在用汽车图片模拟汽车经销商网站。用户应该能够通过单击复选框和/或单选按钮选择来过滤显示的图片。我首先
java - 开发支持多语言的java客户端时优化jar文件大小(图片)
我正在开发Java客户端，它应该支持多种语言。为了翻译文本，我使用 Java ResourceBoundle，它工作正常。现在问题出在图像上。客户端应加载大约 50 张图像，这些图像是棋盘游戏的特定
jquery 褪色图片
我对 jQuery 还很陌生，但我正在寻找一个简单的脚本，通过淡入和淡出的方式在标题中循环 3 或 4 个背景图像。它们是透明的 png，因此我尝试过的许多 slider 都不起作用。有什么想法吗？
jQuery:选择器问题(图片)
我有一个 HTML 文档，其中包含本地文件的图像，例如: ios - 物理主体大于它分配给的纹理(图片)
我的 Sprite “physicsBody ”属性之一出现问题。我已经放置了physicsBody节点“barn ”，直接位于 non-physicsBody 之上节点“mound”没有任何问题。
c# - 获取图像的特定部分(图片)
我想剪切图片的特定部分并用它来将剪切的图像与存储在 HDD 中的另一个图像进行比较。问题是我不知道如何获取源图像的特定部分。我知道要裁剪的图像的位置 (X,Y)。最佳答案这将加载原始版本并创建
Javascript 图片 uploader
如何使用裁剪实用程序在 javascript 中实现图像 uploader 。你如何通过 AJAX 提交图像文件？解决方案是否跨域兼容？最佳答案要实现具有裁剪功能的图片上传小部件，您必须: 将图像
来自图库方向的 Android 图片
public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityRes
java - 一个国家的可点击浮雕(图片)
我想在我的 android 应用程序中显示一个国家的图片。国家必须按地区划分。因此，当用户单击特定区域时，应打开特定屏幕。区域也应该用线分隔，以便用户可以看到区域的开始/结束位置。这是一个国家的例子
php - 在php中上传文件时发生错误(图片)
首先我想对这个问题表示歉意，因为我知道已经有很多人问过这个问题了。但我搜索的所有答案都没有解决我的问题。所以希望您考虑这个问题并帮助我解决这个问题。所以基本上我正在尝试上传图像文件，当我提交它时，会
MySQL:查询结果[图片]
我几乎有了想要的数据...但需要帮助过滤它。 (图在底部) 下面的查询返回状态为 Member-id5 的所有记录，但我需要对其进行过滤。例如:如果我对等做了一个简单的查询。 (exp_channel

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么文字会压低图片？