masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 图片缩小和图片定位_html/css_WEB-ITnose

图片缩小和图片定位_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 12:03:41
asal
1781 orang telah melayarinya

想做一个缩略图 但全图缩图又太小了 
就缩到一个合适的大小 用overflow剪出显示大小的 
但图片的定位是从左边开始的  图片中的一些信息也剪掉了
请前辈指点 

.post{float: left;width: 210px;height: 150px;overflow:hidden;background-color: #fff;margin: 10px 0px 0px 10px;}.post img{max-width: 300px;max-height: 167px;}
Salin selepas log masuk

效果如下


回复讨论(解决方案)

用于裁剪的div设置相对定位 position:relative;
然后 缩小后的图片设置绝对定位，那么你就可以通过控制定位的left或者top来显示你想要的区域，多出的区域即被div裁掉

用于裁剪的div设置相对定位 position:relative;
然后 缩小后的图片设置绝对定位，那么你就可以通过控制定位的left或者top来显示你想要的区域，多出的区域即被div裁掉


正解


用于裁剪的div设置相对定位 position:relative;
然后 缩小后的图片设置绝对定位，那么你就可以通过控制定位的left或者top来显示你想要的区域，多出的区域即被div裁掉


正解
Label berkaitan：
图片 定位 zum keluar
sumber：php.cn
Artikel sebelumnya：Linux(CentOS)搭建SVN服务器全攻略_html/css_WEB-ITnose Artikel seterusnya：<h1>不对应</h2> 为什么还是可以显示的_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1429
Ungkapan biasa untuk memadankan perkataan Saya mempunyai skrip di mana saya cuba memadankan nama kerja baharu dengan nama kerja sedi...
daripada 2024-04-06 21:24:04
0
1
606
Menggunakan Grid untuk Mencipta Reka Bentuk Khusus Ini: Panduan Langkah demi Langkah Saya cuba membuat reka letak yang serupa dengan imej ini, saya telah cuba menggunakan grid...
daripada 2024-04-06 20:29:08
0
2
492
Pilih produk berkaitan woocommerce menggunakan taksonomi tersuai dengan hierarki 3 tahap Saya mempunyai kedai woocommerce dengan klasifikasi tersuai "Sukan". Klasifikasi...
daripada 2024-04-06 20:05:30
0
1
544
Cara menggunakan komponen laravel dengan ruang letak malas livewire Saya ingin menambah rangka komponen laravel saya di dalam ruang letak livewire3 Perkara ya...
daripada 2024-04-06 20:02:10
0
2
543
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan