如何在 html 中調整 div 標簽內的圖像大小？
[英]How do i resize the image inside the div tag in html?
問題描述
我制作了一個輪播，其中將顯示 5 張圖像我希望圖像應該位於頂部，然后是文本，然后是一個按鈕。 但只有圖片來了，我需要解決這個問題。
我想修復 div 卡元素中的圖像。 這個自然圖像是這樣的：
我希望這個組件應該是這樣的：
(function($) { var slide = function(ele, options) { var $ele = $(ele); var setting = { speed: 1000, interval: 4000, }; $.extend(true, setting, options); var states = [{ $zIndex: 1, width: 120, height: 150, top: 69, left: 134, $opacity: 0.2, }, { $zIndex: 2, width: 130, height: 170, top: 59, left: 0, $opacity: 0.4 }, { $zIndex: 3, width: 170, height: 218, top: 35, left: 110, $opacity: 0.7, }, { $zIndex: 4, width: 224, height: 288, top: 0, left: 263, $opacity: 1 }, { $zIndex: 3, width: 170, height: 218, top: 35, left: 470, $opacity: 0.7, }, { $zIndex: 2, width: 130, height: 170, top: 59, left: 620, $opacity: 0.4, }, { $zIndex: 1, width: 120, height: 150, top: 69, left: 500, $opacity: 0.2, }, ]; var $lis = $ele.find("li"); var timer = null; $ele.find(".hi-next").on("click", function() { next(); }); $ele.find(".hi-prev").on("click", function() { states.push(states.shift()); move(); }); $ele .on("mouseenter", function() { clearInterval(timer); timer = null; }) .on("mouseleave", function() { autoPlay(); }); move(); autoPlay(); function move() { $lis.each(function(index, element) { var state = states[index]; $(element) .css("zIndex", state.$zIndex) .finish() .animate(state, setting.speed) .find("img") .css("opacity", state.$opacity); }); } function next() { states.unshift(states.pop()); move(); } function autoPlay() { timer = setInterval(next, setting.interval); } }; $.fn.hiSlide = function(options) { $(this).each(function(index, ele) { slide(ele, options); }); return this; }; })(jQuery); $(".slide").hiSlide();
body { font-family: "Roboto Condensed", sans-serif; overflow-x: hidden; background-color: rgba(0, 0, 0, 0.4); } body { background-image: url(ur.jpg); } h1 { margin: 150px auto 30px auto; text-align: center; color: #fff; } .hi-slide { position: relative; width: 754px; height: 292px; margin: 115px auto 0; } .hi-slide .hi-next, .hi-slide .hi-prev { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50px; line-height: 40px; text-align: center; cursor: pointer; background-color: #fff; color: black; transition: all 0.6s; font-size: 20px; font-weight: bold; } .hi-slide .hi-next:hover, .hi-slide .hi-prev:hover { opacity: 1; background-color: #fff; } .hi-slide .hi-prev { left: -60px; } .hi-slide .hi-prev::before { content: "<"; } .hi-slide .hi-next { right: -60px; } .hi-slide .hi-next::before { content: ">"; } .hi-slide>ul { list-style: none; position: relative; width: 754px; height: 292px; margin: 0; padding: 0; } .hi-slide>ul>li { overflow: hidden; position: absolute; z-index: 0; left: 377px; top: 146px; width: 0; height: 0; margin: 0; padding: 0; border: 3px solid #fff; background-color: #333; cursor: pointer; } .hi-slide>ul>li>img { width: 100%; height: 100%; background-position: center; }
<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> </head> <body> <div class="slide hi-slide"> <div class="hi-prev"></div> <div class="hi-next"></div> <ul> <li> <div class="card" style="width: 18rem"> <img src="https://images.pexels.com/photos/12125084/pexels-photo-12125084.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Img 1" /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </li> <li> <img src="https://images.pexels.com/photos/405240/pexels-photo-405240.jpeg?cs=srgb&dl=attractive-beautiful-curtain-405240.jpg&fm=jpg" alt="Img 2" /> </li> <li> <img src="https://images.pexels.com/photos/1784982/pexels-photo-1784982.jpeg?cs=srgb&dl=attractive-beautiful-beauty-1784982.jpg&fm=jpg" alt="Img 3" /> </li> <li> <img src="https://images.pexels.com/photos/219582/pexels-photo-219582.jpeg?cs=srgb&dl=attractive-beautiful-beauty-219582.jpg&fm=jpg" alt="Img 4" /> </li> <li> <img src="https://images.pexels.com/photos/247124/pexels-photo-247124.jpeg?cs=srgb&dl=attractive-beautiful-beauty-247124.jpg&fm=jpg" alt="Img 5" /> </li> <li> <img src="https://images.pexels.com/photos/1808777/pexels-photo-1808777.png?cs=srgb&dl=attractive-beautiful-beautiful-girl-1808777.jpg&fm=jpg" alt="Img 6" /> </li> <li> <img src="https://images.pexels.com/photos/754448/pexels-photo-754448.jpeg?cs=srgb&dl=attractive-beautiful-beauty-754448.jpg&fm=jpg" alt="Img 7" /> </li> <li> <img src="https://images.pexels.com/photos/761536/pexels-photo-761536.jpeg?cs=srgb&dl=attractive-beautiful-beauty-761536.jpg&fm=jpg" alt="Img 7" /> </li> <li> <img src="https://images.pexels.com/photos/761536/pexels-photo-761536.jpeg?cs=srgb&dl=attractive-beautiful-beauty-761536.jpg&fm=jpg" alt="Img 7" /> </li> </ul> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </body>
1 個解決方案
解決方案1
0 2022-07-11 16:12:10
.hi-slide ul li img {
height:100px;
}
您可以根據父 div 指定圖像的高度。
如何將jQuery動畫對象放在HTML畫布或Div標簽內？
[英]How Do I Place jQuery Animated Object Inside A HTML Canvas or Div Tag?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.